django js 实现表格动态标序号的实例代码

要实现表格动态标序号，需使用Django和JavaScript相结合来完成。以下是详细攻略。

第一步：编写HTML文件

在HTML文件中先编写一个表格，然后在表头中加入一个序号列，并设置为不显示，表体中的每行数据也要加入一个列，用来显示序号。

<table class="table">
  <thead>
    <tr>
      <th style="display:none;">序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display:none;">1</td>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td style="display:none;">2</td>
      <td>李四</td>
      <td>20</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

第二步：编写JavaScript代码

编写用于显示序号的JavaScript代码。这里我们使用jQuery库，先找到表格中所有的行，然后遍历每一行，取出序号列的值，再将序号列的值与当前所在的行的行号相加，得到当前行的序号。最后将序号显示在序号列中。

$(document).ready(function() {
  $(".table tbody tr").each(function(index) {
    $(this).children().first().text(index + 1);
  });
});

第三步：将JavaScript代码填入HTML文件中

将编写好的JavaScript代码填入HTML文件中，放在<script>标签中，插入到文件底部。

<script>
  $(document).ready(function() {
    $(".table tbody tr").each(function(index) {
      $(this).children().first().text(index + 1);
    });
  });
</script>

第四步：运行程序

通过Django的runserver命令，启动应用，访问HTML文件，即可看到表格中序号的动态显示。

示例说明一：

假设在实现表格动态标序号的基础上，要实现点击序号使其颜色变化，可以在JavaScript代码中加入以下内容：

$(document).ready(function() {
  $(".table tbody tr").each(function(index) {
    var td = $(this).children().first();
    td.text(index + 1);
    td.click(function() {
      $(this).css("color", "red");
    });
  });
});

示例说明二：

假设要实现客户端排序表格，只需在原有的代码基础上根据需求对表格数据进行排序，再将数据填回表格中即可。以下是示例代码：

$(document).ready(function() {
  var data = [
    { name: "张三", age: 18, sex: "男" },
    { name: "李四", age: 20, sex: "男" },
    { name: "王五", age: 22, sex: "女" }
  ];

  function sortData(field, order) {
    data.sort(function(a, b) {
      return order * (a[field] < b[field] ? -1 : 1);
    });
  }

  function refreshTable() {
    var tbody = $(".table tbody");
    tbody.empty();

    for (var i = 0; i < data.length; i++) {
      var item = data[i];
      var tr = $("<tr></tr>");
      tr.append($("<td style='display:none;'></td>"));
      tr.append($("<td></td>").text(item.name));
      tr.append($("<td></td>").text(item.age));
      tr.append($("<td></td>").text(item.sex));
      tbody.append(tr);
    }

    $(".table tbody tr").each(function(index) {
      $(this).children().first().text(index + 1);
    });
  }

  sortData("age", -1);
  refreshTable();
});