如何使用 jQuery 将单元格添加到表格中答案

【问题标题】：How to add cells to a table using jQuery如何使用 jQuery 将单元格添加到表格中
【发布时间】：2018-04-09 16:44:49
【问题描述】：

我正在尝试使用按钮将列和行添加到使用 jQuery 的表中。发生的情况是，当我添加一行时，它只有一个单元格，即使表格是两列，当我向表格添加更多列时，它仍然是一个单元格行。

$(document).ready(function(){
var table = $('table tbody');
var addrow = $('.add-row');
var addcolumn=$('.add-column');
var row = '<tr><td>cell</td>';
var selectrow=$('table tbody tr').last();
var column='<th>';
var numberofcolumns = $('th').length;
var cell='<td>cell</td>';

addrow.click(function(){
    table.append(row);
    for(i=0; i<numberofcolumns; i++)
        {
            selectrow.last().append(cell);
        };
});

【问题讨论】：

标签： jquery html html-table rows cells

【解决方案1】：

我有一些代码可能会有所帮助。

 var tbody = $('#tablelinks tbody');
$('#addRows').on('click', function ()
{
    var rowcount = ($('#tablelinks tr').children().length / 4) +1;
    //alert('There are ' + rowcount + ' rows in the table');

    tbody.append('<tr><td>' + rowcount + 'a</td><td>' + rowcount + 'b</td><td>' + rowcount + 'c</td><td>' + rowcount + 'd</td>');
    $('#tablelinks td').addClass("contents");

    modifyTable();
});

$('#removeRows').on('click', function ()
{
    $('#tablelinks tr:last').remove();
});

function modifyTable()
{
    $('#tablelinks tr').on('mouseenter', function () {
        $(this).css('background-color', 'white');
    });

    $('#tablelinks tr').on('mouseleave', function () {
        $(this).css('background-color', 'transparent');
    });

    $('#tablelinks td').on('mouseenter', function () {
        $(this).css('background-color', 'red');
        $(this).css('cursor', 'pointer');
    });

    $('#tablelinks td').on('mouseleave', function () {
        $(this).css('background-color', 'transparent');
    });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divtablelinks" class="contents">
    Div_6: Fun with Table Rows and Table Cells
    <br />
    <input id="addRows" type="button" value="Add TableRows" />
    <br />
    <input id="removeRows" type="button" value="Remove TableRows" />
    <br />
    <table id="tablelinks">
        <tr>
            <td>
                <a id="infolinks_1a" class="contents">1a</a>
            </td>
            <td>
                <a id="infolinks_1b" class="contents">1b</a>
            </td>
            <td>
                <a id="infolinks_1c" class="contents">1c</a>
            </td>
            <td>
                <a id="infolinks_1d" class="contents">1d</a>
            </td>
        </tr>
        <tr>
            <td>
                <a id="infolinks_2a" class="contents">2a</a>
            </td>
            <td>
                <a id="infolinks_2b" class="contents">2b</a>
            </td>
            <td>
                <a id="infolinks_2c" class="contents">2c</a>
            </td>
            <td>
                <a id="infolinks_2d" class="contents">2d</a>
            </td>
        </tr>
    </table>
</div>

【讨论】：