javascript - JS 在 HTML 表格中追加行

Question

我有一个包含一些值的隐藏字段，我必须将这些值附加到 HTML 表中。表中的列数是固定的。我已成功追加，但在第一行之后，它应该在新行中追加数据，而不是在同一行中追加。我就是这样做的

$("#btntbl").click(function () {
                debugger
                var tabl = $("#testTable");
                var vals = $("#txthidden").val();
                for (var i = 0; i < vals.split(";").length; i++) {                       
                        for (var j = 0; j < vals.split(";")[i].split(",").length; j++) {
                        tabl.append("<td>" + vals.split(";")[i].split(",")[j] + "</td>");
                    }
                }
            });

另请注意，某些用户没有 disabled 列的值 JS Fiddle每次单击按钮时如何添加新行？

Answer 1

您需要拆分两次并为每一行创建 tr:

$("#btntbl").click(function () {

  var tabl = $("#testTable"),
      vals = $("#txthidden").val(),
      rows = vals.split(';'),
      columns, i;

  for (i = 0; i < rows.length; i++) {
    columns = rows[i].split(',');
    tabl.append(
      '<tr>' + 
          '<td>' + columns[0] + '</td>' + 
          '<td>' + columns[1] + '</td>' + 
          '<td>' + (columns[2] || '') + '</td>' + 
      '</tr>'
    );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btntbl" value="Export to table">
<input type="hidden" value="User1,pwd1;User2,pwd2,disabled;User3,pwd3,disabled;User4,pwd4" id="txthidden" />
<table id="testTable" border="2">
    <thead valign="top">
        <tr>
            <th>User</th>
            <th>Password</th>
            <th>Disabled</th>
        </tr>
    </thead>
</table>