将 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() {

    $('#table_data tbody tr').each(function( index ) {

       $('<td />').appendto($(this));       

    });

});

Answer 2

查看addColumn()- 函数。

这很简单。

1. 选择表中的所有行。

2. <td>为每一行创建一个。

3. 将这些 td 附加到行中。

PS：您可以决定为函数提供更多参数，例如列的标题和默认值。现在我只是选择了表的 ID 作为参数，所以你至少可以跨表重用它。PS2：我从按钮上的 onclick 事件触发了该功能。

function addColumn( tableId ) {

    let tableRows = document.querySelectorAll( `#${tableId} tr` );

  tableRows.forEach( row => {

    let td = document.createElement('td');

    row.appendChild(td);

  });

}

.add{position: fixed;top:10px}

table{

    margin: 30px auto;

}

table th,td{

    padding:10px;

    border-bottom: 1px solid #ddd;

    border-right:1px solid #ddd;

    text-align: center;

}

input{

    width:100px;

}

<div class="add">

        <button id="add-btn">Add Row</button>

        <button id="addCol-btn" onclick="addColumn('table_data')">Add Column</button>

    </div>

    <table id="table_data">

        <th>Name</th>

        <th>Color</th>

        <th>Price</th>

        <tr>

            <td>Alex</td>

            <td>Red</td>

            <td>150</td>

        </tr>

        <tr>

            <td>Max</td>

            <td>Blue</td>

            <td>300</td>

        </tr>

        <tr>

            <td>Mike</td>

            <td>Black</td>

            <td>700</td>

        </tr>

    </table>

Answer 3

您可以简化您的功能，如下所示：

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

            $("#table_data tr").each(function(i) {

               if( i > 0 ) {

                    $(this).append('<td><input type="text" /></td>')               

               }

            });

    });

这是更新的小提琴