บทความนี้อธิบายถึงวิธีที่ JS ใช้การเพิ่มการลบและการอัปเดตของตารางแบบไดนามิก แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การทำงานของตาราง </title>
<style type = "text/css">
ร่างกาย {
ขนาดตัวอักษร: 13px;
ความสูงของสาย: 25px;
-
โต๊ะ {
ชายแดนด้านบน: 1px Solid #333;
ขอบด้านล่าง: 1px Solid #333;
ความกว้าง: 300px;
-
td {
ชายแดนขวา: 1px Solid #333;
ขอบด้านล่าง: 1px Solid #333;
-
.ชื่อ {
TEXT-ALIGN: CENTER;
Font-Weight: ตัวหนา;
ความเป็นมา: #CCC;
-
.ศูนย์ {
TEXT-ALIGN: CENTER;
-
#displayinfo {
สี: สีแดง;
-
</style>
<script type = "text/javascript">
ฟังก์ชั่น addrow () {// เพิ่มหนึ่งบรรทัด
var tableObj = document.getElementById ('myTable');
var rownums = tableobj.rows.length;
var newrow = tableobj.insertrow (rownums);
var col1 = newrow.insertcell (0);
col1.innerhtml = "ความสุขตกจากท้องฟ้า";
var col2 = newrow.insertcell (1);
col2.innerhtml = "$ 18.5";
col2.align = "center";
var divinfo = document.getElementById ('displayInfo');
divinfo.innerhtml = "เพิ่มผลิตภัณฑ์ได้สำเร็จ";
-
ฟังก์ชั่น delrow () {// ลบบรรทัดที่สอง
document.getElementById ('mytable'). deleterow (1);
var divinfo = document.getElementById ('displayInfo');
divinfo.innerhtml = "ลบผลิตภัณฑ์สำเร็จ";
-
ฟังก์ชั่น updaterow () {// อัปเดตข้อมูลบรรทัด
var urow = document.getElementById ('myTable') แถว [0];
urow.className = "title";
-
</script>
</head>
<body>
<table cellpadding = "0" cellpacing = "0" id = "myTable">
<tr id = "row1">
<td> ชื่อหนังสือ </td>
<td> ราคา </td>
</tr>
<tr id = "row2">
<td> ห้องพร้อมวิว </td>
<td> $ 30.00 </td>
</tr>
<tr id = "row3">
<td> 60 ช่วงเวลา </td>
<td> $ 32.00 </td>
</tr>
</table>
<input name = "b1" type = "button" value = "เพิ่มหนึ่งบรรทัด" onclick = "JavaScript: addrow ();" /> <br />
<input name = "b2" type = "button" value = "ลบบรรทัดที่สอง" onclick = "JavaScript: delrow ();" /> <br />
<input name = "b3" type = "button" value = "Modify title" onclick = "JavaScript: updaterow ();" /> <br />
<div id = "displayinfo"> </div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน