jquery 如何使用循环将数据填充到表中？

acruukt9 于 2023-06-29 发布在 jQuery

关注(0)|答案(2)|浏览(198)

我正在将jQuery中的数据填充到多个html表中，但第二行之后的所有内容都在表外打印。
我在这里创造了一个小提琴来展示发生了什么
https://jsfiddle.net/s81zb7ga/
我不明白为什么它一直在表外打印。
我的循环代码如下：

var title = '';
                $('#results_credentials').html("");
                for(var i in data) {
                    var m = '';

                    var end_of_tbl = '</tbody>';
                    end_of_tbl += '</table>';
                    end_of_tbl += '</div>';
                    end_of_tbl += '</div>';
                    end_of_tbl += '</div>';

                    if(title !== data[i].title) {
                        if(title !== "") {
                            m += end_of_tbl;
                        }

                        title = data[i].title;
                        
                        m += '<div class="panel-collapse box box-warning">';
                        m += '<div class="box-header">';
                        m += '<h3 class="box-title">';
                        m += '<a href="#box_expand_' + data[i].sequence + '" data-toggle="collapse" id="credential_title_' + data[i].sequence + '">' + data[i].title + '</a>';
                        m += '</h3>';
                        m += '</div><!-- /.box-header -->';
                        
                        m += '<div class="box-body panel-collapse collapse2" id="box_expand_' + data[i].sequence + '">';
                        m += '<div class="table-responsive">';
                        m += '<table class="table table-bordered table-hover">';
                        m += '<thead>';
                        m += '<tr>';
                        m += '<th class="credential_group credential_group_' + data[i].title.replace(' ', '_') + '">Group</th>';
                        m += '<th>Note</th>';
                        m += '<th>Username</th>';
                        m += '<th>Password</th>';
                        m += '<th>Updated</th>';
                        m += '<th colspan="2">Actions</th>';
                        m += '</tr>';
                        m += '</thead>';
                        m += '<tbody>';
                    }

                    m += '<tr id="credential_row_' + data[i].sequence + '">';
                    m += '<td colspan="7">test</td>';
                    m += '</tr>';

                    $('#results_credentials').append(m);
                }

jquery

来源：https://stackoverflow.com/questions/76559077/how-can-i-populate-data-into-a-table-using-a-loop

2条答案

按热度按时间

xt0899hw1#

根据epascarello的评论，原来这些标签是被浏览器自动关闭的。
因此，通过将var m = '';和$('#results_credentials').append(m);移动到for循环之外，它一次追加整个表和数据，因此不会破坏HTML。

赞(0）回复(0）举报 2023-06-29

mklgxw1f2#

因此，还有其他方法可以使用jQuery生成动态内容。你可以按照下面的一些：

var data = '[{"sequence":"9753","updated":"26\/06\/2023 18:26:33","updated_by":"Charlie Ford","title":"GroupTest","data":{"note":"2","username":"user","password":"pass"}},{"sequence":"9755","updated":"26\/06\/2023 18:26:41","updated_by":"Charlie Ford","title":"GroupTest","data":{"note":"1","username":"2","password":"3"}},{"sequence":"9756","updated":"26\/06\/2023 16:57:02","updated_by":"Charlie Ford","title":"1","data":{"note":"1","username":"1","password":"1"}}]';
$('#results_credentials').html("");
$($.parseJSON(data)).each(function(i, obj) {

  //console.log(obj);

  var panelDiv = $("<div/>").attr({
    "class": "panel-collapse box box-warning"
  });
  var boxHeaderDiv = $("<div/>").attr({
    "class": "box-header"
  });
  var h3Tag = $("<h3/>").attr({
    "class": "box-title"
  });
  var aTag = $("<a/>").attr({
    "href": "#box_expand_" + obj.sequence,
    "data-toggle": "collapse",
    "id": "credential_title_" + obj.sequence
  }).html(obj.title);

  $(h3Tag).append(aTag);
  $(boxHeaderDiv).append(h3Tag);
  $(panelDiv).append(boxHeaderDiv);
  $('#results_credentials').append(panelDiv);

  var contentDiv = $("<div/>").attr({
    "class": "box-body panel-collapse collapse2",
    "id": "box_expand_" + obj.sequence
  });
  var tableDiv = $("<div/>").attr({
    "class": "table-responsive"
  });
  var tableTag = $("<table/>").attr({
    "class": "table table-bordered table-hover",
    "border": "1"
  });
  var headerTag = $("<thead/>");
  var headerTr = $("<tr/>");
  var titleTh = $("<th/>").attr({
    "class": "credential_group credential_group_" + obj.title
  }).html("Group");
  var noteTh = $("<th/>").html("Note");
  var usernameTh = $("<th/>").html("Username");
  var passwordTh = $("<th/>").html("Password");
  var updatedTh = $("<th/>").html("Updated");
  var actionsTh = $("<th/>").attr({
    "colspan": "2"
  }).html("Actions");
  $(headerTr).append(titleTh);
  $(headerTr).append(noteTh);
  $(headerTr).append(usernameTh);
  $(headerTr).append(passwordTh);
  $(headerTr).append(updatedTh);
  $(headerTr).append(actionsTh);
  $(headerTag).append(headerTr);
  $(tableTag).append(headerTag);

  var tbodyTag = $("<tbody/>");
  var dataTr = $("<tr/>");
  var titleTd = $("<td/>").html(obj.title);
  var noteTd = $("<td/>").html(obj.data.note);
  var usernameTd = $("<td/>").html(obj.data.username);
  var passwordTd = $("<td/>").html(obj.data.password);
  var updatedTd = $("<td/>").html(obj.updated);
  var actiondTd = $("<td/>").html("");

  $(dataTr).append(titleTd);
  $(dataTr).append(noteTd);
  $(dataTr).append(usernameTd);
  $(dataTr).append(passwordTd);
  $(dataTr).append(updatedTd);
  $(dataTr).append(actiondTd);
  $(tbodyTag).append(dataTr);
  $(tableTag).append(tbodyTag);
  $('#results_credentials').append(tableTag);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results_credentials">

</div>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 如何使用循环将数据填充到表中？

2条答案

相关问题

热门标签

最新问答