JavaScript_动态表格_添加功能

 1、动态表格_添加功能.html

    
    
    


                        

                            
                            
                            
                            
                        
                        

                            
学生信息表
                            

                                
编号
                                
姓名
                                
性别
                                
操作
                            

                            

                                
1
                                
张三丰
                                
男
                                
删除 
                            
                            

                                
2
                                
张翠山
                                
男
                                
删除 
                            
                            

                                
3
                                
张无忌
                                
男
                                
删除 
                            
                        

                

 

    // 当点击id为"btn_add"的元素时，执行以下函数
    document.getElementById("btn_add").onclick = function () {
        // [待填充]
    };
    //该函数是为一个id为"btn_add"的按钮元素绑定一个点击事件，当按钮被点击时，将执行匿名函数内的代码

 

let id = document.getElementById("id").value;  // 获取id元素的值
let name = document.getElementById("name").value;  // 获取name元素的值
let gender = document.getElementById("gender").value;  // 获取gender元素的值
//这个函数通过调用document.getElementById方法，获取页面中指定id的元素的值，并将其赋值给对应的变量。
//这样就可以通过这些变量来操作或使用页面元素的值

//创建一个  元素
td_id = document.createElement("td");
//创建一个文本节点
text_id = document.createTextNode(id);
//将文本节点添加到  元素中
td_id.appendChild(text_id);
//这个函数创建了一个新的HTML表格单元格元素（），并创建了一个包含id文本的文本节点。
//然后将文本节点添加到表格单元格元素中

let td_a = document.createElement("td");  //创建一个元素
let ele_a = document.createElement("a");  //创建一个元素
ele_a.setAttribute("href", "javascript:void(0)");  //设置元素的href属性为"javascript:void(0)"
ele_a.setAttribute("onclick", "delTr(this)");  //设置元素的onclick属性为"delTr(this)"
let text_a = document.createTextNode("删除");  //创建一个文本节点，内容为"删除"
ele_a.appendChild(text_a);  //将文本节点添加到元素中
td_a.appendChild(ele_a);  //将元素添加到元素中
//该代码创建了一个包含链接和文本的表格单元格。链接的href属性设置为"javascript:void(0)"，表示点击链接时不会跳转到其他页面。
//链接的onclick属性设置为"delTr(this)"，表示点击链接时会调用"delTr"函数并传递链接本身作为参数。
//文本内容"删除"由文本节点创建并添加到链接中，然后链接被添加到表格单元格中。

// 创建一个 tr 元素
let tr = document.createElement("tr");
//该函数使用JavaScript创建一个新的HTML表格行元素，并将其作为返回值返回。

//创建一个tr元素，并将td元素添加到其中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//给定一个HTML表格，将四个表格数据单元格（td）添加到当前行（tr）中。

//获取页面中所有table标签
table = document.getElementsByTagName("table")[0];
//将标签作为子元素添加到第一个table标签中
table.appendChild(tr);
//这个代码片段将获取页面中第一个table元素，并将一个tr元素作为其子元素添加。

2、可以使用JavaScript的DOM操作，通过以下步骤动态添加数据到表格中：

1. 获取表格对象，可以通过getElementById或者querySelector等方式获取。

2. 创建一个新的行对象，并设置行的属性。可以使用createElement方法创建tr元素，然后使用setAttribute方法设置该行的属性，如id等。

3. 创建每个单元格对象，并设置单元格内容。可以使用createElement方法创建td元素，然后使用appendChild方法将文本节点添加到单元格中。

4. 将单元格添加到行中，可以使用appendChild方法将每个单元格对象添加到行对象中。

5. 将新创建的行对象添加到表格中，可以使用appendChild方法将行对象添加到表格对象的tbody或thead中。

示例代码：

// 获取表格对象
var table = document.getElementById("myTable");

// 创建一个新的行对象
var row = document.createElement("tr");

// 创建每个单元格对象，并设置单元格内容
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.appendChild(document.createTextNode("Cell 1"));
cell2.appendChild(document.createTextNode("Cell 2"));

// 将单元格添加到行中
row.appendChild(cell1);
row.appendChild(cell2);

// 将新创建的行对象添加到表格中
table.appendChild(row);