javascript - 如何使用jquery在html表格的右侧添加一定数量的空白列

Question

我正在使用 jquery 使用 json 数据生成一个表，它只有两列数据。我试图在生成的表格右侧再添加 10 个空白列，甚至没有列标题。下面是用 json 数据填充表格的代码:

function populateTable(result) {
        $("#mytable").empty();
        result = jQuery.parseJSON(result.d);
        var keys = Object.keys(result[0]);
        var row = $('<tr></tr>').appendTo("#mytable");
        $.each(keys, function (i, item) {
            $('<th></th>').text(item).appendTo(row);
        });

        $.each(result, function (i, item) {
            var row = $('<tr></tr>').appendTo("#mytable");
            $.each(keys, function (i, key) {
                $('<td></td>').text(item[key]).appendTo(row);
            });
        });
    }

到目前为止我已经试过了:

for(var i=0;i=10;1++){$('table').find('tr').each(function(){$(this).prepend('<td></td>'); });});

这是行不通的。任何帮助将不胜感激。谢谢。

Answer 1

.prepend()将在开始使用时插入元素 .append()而不是在右边插入。

此外，您所尝试的内容存在严重问题。在 for 循环条件中，您有 i=10，它将始终返回 true，循环将变为无限循环。

for (var i = 0; i < 10; i++) {
    $('table').find('tr').each(function() {
        $(this).append('<td></td>');
    });
}

for (var i = 0; i < 10; i++) {
    $('table').find('tr').each(function() {
        $(this).append('<td></td>');
    });
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>


<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>