如何使用 jQuery 更改表格单元格的内容，然后在用完时动态添加更多内容？

Question

我有一个三列的表。我在 PHP 中创建了一个字符串，用逗号分隔“id”和相应的数据。这些对用感叹号分隔，以便我可以以这种方式使用它们。我想用数据填充每个表格单元格并为其分配一个 ID，以便稍后在单击该对象时可以将该 ID 用于 mysql 查询。当我填满该行并需要更多列时，我想添加另一行。当包含 id-data 对的数组为空时，我想打破循环。我不知道我在做什么，所以请详细说明。经过几天的研究，这是我可以收集到的，甚至还没有接近产生结果。

$("#class").keyup(function () 
    {
        $.post("classSearch.php",
    {
            class:$(this).serialize(),
        },
        function(data)
        {   
            if (data == "notFound") 
            {
                $("#searchResults td").siblings(":first").text("No Results");
            }
            else
            {
                var counter = 0;
                var resultsTemp= data.split("!");
                var iterations = resultsTemp.size();
                $("#searchResults td:first").each(function() 
                {       
                    if (counter == iterations) 
                    {return false;}
                    if((counter % 3) == 0)
                    {$("#searchResults td").siblings(":last").append("<tr><td></td><td></td><td></td></tr>");}
                    var results = resultsTemp.split(",");
                    $(this).text(results[(1)]);
                    $(this).attr("id",results[0]);
                    counter ++; 
                });
            }
        });
    });

HTML

<table  id="searchResults">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 1

清空表格并保留为<table id="searchResults"></table>

现在，如果数据没有返回结果，您可以这样做：

$("#searchResults").append("<tr><td>Nothing returned</td></tr>");

在else 内（即当您有数据时），执行以下操作：

var resultsTemp = data.split('!');
var addToTable = '';
var totalElements = resultsTemp.length;
for (var i=0; i<totalElements/3; i++) {
    if (i%3 == 0)
        // Beginning a new row
        addToTable += '<tr>';

    // Parse and get the id and value from each element
    var elemId = resultsTemp[i].split(',')[0];
    var elemValue = resultsTemp[i].split(',')[1];
    addToTable += '<td id="'+elemId+'">'+elemValue+'</td>';

    if (i%3 == 2)
        // End of row
        addToTable += '</tr>\n';
}

// If the total set was not an exact multiple of 3
// you will need to close the row
if (totalElements %3 !=0)
    addToTable += '</tr>\n';

$("#searchResults").append(addToTable);