将 td 元素插入到行组

Question

我制作了一个按钮以将单元格作为列添加到一组行中，但是当我尝试单击按钮以添加整个列时，它会将td元素作为文本插入

这是代码

add_col.on('click',function() {

    var table = $('#table_data'), //get the table

    rowsNum = $('#table_data tr').length // get number of rows

    cellsNum = document.getElementById('table_data').rows[0].cells.length

    for(x = 0;x < rowsNum; x++){

      //document.getElementById('table_data').rows[x].insertCell(cellsNum)

      document.getElementById('table_data').rows[x].append('<td></td>')

    }    

})

[https://jsfiddle.net/georgesteven1/3kpg6e8c/9/][1]

Answer 1

如果你使用 Jquery，你可以遍历表 tr 并添加一个新的 td。add_col.on('click',function() {&nbsp; &nbsp; $('#table_data tbody tr').each(function( index ) {&nbsp; &nbsp; &nbsp; &nbsp;$('<td />').appendto($(this));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; });});

Answer 2

查看addColumn()- 函数。这很简单。选择表中的所有行。<td>为每一行创建一个。将这些 td 附加到行中。PS：您可以决定为函数提供更多参数，例如列的标题和默认值。现在我只是选择了表的 ID 作为参数，所以你至少可以跨表重用它。PS2：我从按钮上的 onclick 事件触发了该功能。function addColumn( tableId ) {&nbsp; &nbsp; let tableRows = document.querySelectorAll( `#${tableId} tr` );&nbsp; tableRows.forEach( row => {&nbsp; &nbsp; let td = document.createElement('td');&nbsp; &nbsp; row.appendChild(td);&nbsp; });}.add{position: fixed;top:10px}table{&nbsp; &nbsp; margin: 30px auto;}table th,td{&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; border-bottom: 1px solid #ddd;&nbsp; &nbsp; border-right:1px solid #ddd;&nbsp; &nbsp; text-align: center;}input{&nbsp; &nbsp; width:100px;}<div class="add">&nbsp; &nbsp; &nbsp; &nbsp; <button id="add-btn">Add Row</button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="addCol-btn" onclick="addColumn('table_data')">Add Column</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <table id="table_data">&nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Color</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Alex</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Red</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>150</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Max</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Blue</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>300</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Mike</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Black</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>700</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>

Answer 3

您可以简化您的功能，如下所示：&nbsp; &nbsp;add_col.on('click',function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#table_data tr").each(function(i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if( i > 0 ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).append('<td><input type="text" /></td>')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });这是更新的小提琴