【问题标题】:Add serial number to <tr> in ajax在ajax中将序列号添加到<tr>
【发布时间】:2017-06-17 12:48:39
【问题描述】:

我正在使用 ajax 来动态生成表格行。我想在每个表格行中添加序列号,即 - td1。其他一切正常,请帮我在每个 tr 中添加序列号。

< script >
    $(document).ready(function () {
        $('form').on('submit', function (e) {
            e.preventDefault();
            ajx();
        });

        function ajx() {
            $('tbody>tr').remove();
            var side = $('input[name=pins]:checked').val();
            $.ajax({
                beforeSend: function () {
                    $('#loader').show();
                },
                complete: function () {
                    $('#loader').hide();
                },
                url: "<?php echo base_url('user/genealogy/ajaxLevels')?>",
                type: "POST",
                dataType: 'json',
                data: {
                    side: side
                },
                success: function (result)
                {

                    var obj = jQuery.parseJSON(JSON.stringify(result));
                    var id = "#tbl";
                    $.each(obj, function () {
                        var row = $('<tr>');
                        var td1 = $('<td />');
                        var td2 = $('<td />');
                        var td3 = $('<td />');
                        var td4 = $('<td />');
                        var td5 = $('<td />');

                        td1.text('1'); // I WANT TO ADD SERIAL NUMBER HERE
                        td2.text(this.name);
                        td3.text(this.id);
                        td4.text(this.date);
                        td5.text(this.sponsor_id);

                        row.append(td1);
                        row.append(td2);
                        row.append(td3);
                        row.append(td4);
                        row.append(td5);

                        $(id).append(row);
                    });
                }

            });
        }
    });

这是要显示数据的表格:

<table class="table">
    <thead class="text-primary">
        <th>S.No.</th>
        <th>Name</th>
        <th>Member ID</th>
        <th>DOJ</th>
        <th>Sponser ID</th>
    </thead>
    <tbody id="tbl">
    </tbody>
</table>

【问题讨论】:

  • 您希望数字像 1,2,3,4... 还是其他?
  • 是的,1,2,3,4,5,6……

标签: jquery json ajax codeigniter


【解决方案1】:

您可以只使用设置为 1 的变量作为起始值。
然后在每次迭代时增加这个变量。

success: function (result)
  {

    var obj = jQuery.parseJSON(JSON.stringify(result));
    var id = "#tbl";

    // use i as a counter
    var i = 1;

    $.each(obj, function () {
      var row = $('<tr>');
      var td1 = $('<td />');
      var td2 = $('<td />');
      var td3 = $('<td />');
      var td4 = $('<td />');
      var td5 = $('<td />');

      td1.text(i); // Use i here
      td2.text(this.name);
      td3.text(this.id);
      td4.text(this.date);
      td5.text(this.sponsor_id);

      row.append(td1);
      row.append(td2);
      row.append(td3);
      row.append(td4);
      row.append(td5);

      $(id).append(row);

      // Increment i for the next iteration
      i++;
    });
  }

【讨论】:

  • 谢谢,这很容易。 :)
【解决方案2】:

你也可以使用

$.each(obj, function (key,value) {

您可以使用key + 1 显示序列号。在每个函数中,Key 总是从 0 开始。

【讨论】:

    猜你喜欢
    • 2011-06-04
    • 1970-01-01
    • 1970-01-01
    • 2018-05-16
    • 1970-01-01
    • 2013-03-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-05
    相关资源
    最近更新 更多