Javascript添加行，一个函数适用于不同的表格。

28 浏览
0 Comments

Javascript添加行，一个函数适用于不同的表格。

我有几个像这样的表格：\n

\n

标签的数量是非常可变的。\n目前我正在使用这样的一个函数：\n

function addRow(){
var table = document.getElementById('table_1');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0)
....
cell1.innerHTML="
}

\n使用这种方法，每种类型的表格都需要一个自定义函数。\n有没有办法在表格中添加一行，该行与上一行完全相同？\n在一个有7个单元格的表格中，将添加7个具有正确内容的单元格。\n这在纯JS中可行吗？

0

2 答案

0 Comments

问题的出现原因：这个问题的出现是因为需要在不同的表中添加行，但是希望使用相同的函数来实现。

解决方法：可以使用一个通用的函数来实现在不同的表中添加行的功能。可以通过传递参数来指定要操作的表格和行的元素，并使用JavaScript中的方法来操作DOM元素。

具体的解决方法如下所示：

1. 首先，可以在HTML中定义两个按钮，分别用于克隆行和创建行。可以使用onclick属性将按钮与相应的函数关联起来。

2. 然后，在HTML中定义一个表格，并给tbody元素设置一个唯一的id，以便在JavaScript中引用。


    
        

            
            bar

3. 接下来，在JavaScript中定义两个函数来实现克隆行和创建行的功能。

function cloneRow() {
    var row = document.getElementById("rowToClone"); // 找到要复制的行
    var table = document.getElementById("tableToModify"); // 找到要添加到的表格
    var clone = row.cloneNode(true); // 复制子元素
    clone.id = "newID"; // 修改id或其他属性/内容
    table.appendChild(clone); // 将新行添加到表格末尾
}
function createRow() {
    var row = document.createElement('tr'); // 创建行节点
    var col = document.createElement('td'); // 创建列节点
    var col2 = document.createElement('td'); // 创建第二个列节点
    row.appendChild(col); // 将第一列添加到行中
    row.appendChild(col2); // 将第二列添加到行中
    col.innerHTML = "qwe"; // 在第一列中放入数据
    col2.innerHTML = "rty"; // 在第二列中放入数据
    var table = document.getElementById("tableToModify"); // 找到要添加到的表格
    table.appendChild(row); // 将行添加到表格中
}

通过以上代码，可以实现在不同的表格中添加行的功能。可以通过调用不同的函数来在不同的表格中使用相同的逻辑来添加行。

参考资料：[https://stackoverflow.com/a/1728578/3603806](https://stackoverflow.com/a/1728578/3603806)

0
0 Comments

问题的出现原因：需要实现一个功能，点击按钮可以在表格中添加一行。但是，问题是这个功能需要使用纯JavaScript来实现，而不是使用jQuery。

解决方法：根据给出的代码，可以使用以下纯JavaScript代码来实现该功能：

document.querySelectorAll('button').forEach(function(button){
  button.addEventListener('click', function(){
    var table = this.previousElementSibling;
    var lastRow = table.querySelector('tr:last-child').innerHTML;
    table.insertAdjacentHTML('beforeend', '' + lastRow + '');
  });
});

这段代码首先通过`querySelectorAll`方法获取所有的按钮元素，然后使用`forEach`方法对每个按钮添加一个点击事件监听器。在点击事件的处理程序中，首先获取按钮前面的表格元素，然后使用`querySelector`方法获取表格中最后一行的HTML内容。最后，使用`insertAdjacentHTML`方法将最后一行的HTML内容插入到表格末尾作为新的一行。

以上就是解决这个问题的原因和方法。

0