javascript - 如何将唯一 id 分配给与其行号对应的复选框(更新 : or item ID) under Bootstrap 4?

Question

我正在设计一个表格来显示 JavaScript 类(class)的婴儿用品的交易历史记录。如何为每个复选框分配唯一的id，该id由与行号相对应的数字序列组成？

线框图如下所示。

每一行都按顺序编号，从 1 开始到表行末尾。

在最右边的一列中，在 Bootstrap 4 的帮助下，我放置了一个切换复选框，以便用户可以手动选择是列出他/她的待售商品('listing')还是结束销售('end') )。

我被告知每个复选框 ID 必须是唯一的，因此我打算根据各自的行号将每个复选框的输入 ID 命名为“toogle1”、“toogle2”等。

我的问题是:如何自动生成id号？

我使用以下代码对行号进行了类似的练习:

HTML:

<table id="table" data-toggle="table" data-height="800" data-pagination="true" data-page-size="3">
    <thead>
        <tr>
            <th data-field="seq-number" data-width="100" data-width-unit="px">Number</th>
        </tr>
    </thead>
</table>

JavaScript:

var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';

for (var i = 1, rowlength = rows.length; i < rowlength; i++) {rows[i].children[0][text]= i;
}

另一方面，我的表格和复选框的代码如下:

<table id="table" data-toggle="table" data-height="800" data-pagination="true" data-page-size="3">
            <thead>
                <tr>
                    <th data-field="status" data-width="200" data-width-unit="px">Status</th>
                </tr>
            </thead>



<tr>
    <td>
        <input type="checkbox" id="toggle1" data-width="100">
            <script>
                 $(function () {
                 $('#toggle1').bootstrapToggle({
                 on: 'Listing',
                 off: 'Ended'
                 });
                 })
            </script>
    </td>
</tr>

我希望输入ID(即toggle1，toggle2，...，toggle999)可以自动生成并分配，与行号相对应。

我期望最终结果为 id = "'toggle' + i"。

非常感谢您的帮助。

更新:@cengiz sevimli 提醒我，最好使用项目 ID 分配状态复选框 ID，因为它比行号“更唯一”。但是如何创建 ID，例如用户 ID #000001 和时间戳 - 000001-201910301600 的产品？

Answer 1

让我说，您实际上并不需要为任何复选框分配唯一的 ID，您可以直接从所选行的 html 中选择您需要的任何信息。

无论如何，如果您想要所选项目的 ID(这些项目将随您的表单一起提交)，您可以将 ID 设置为表中的每个输入(而不是 selectAll):

$(".cb input").each(
  (index, el) => {
    // If the checkbox is not the "Select All"
    if($(el).attr("name") === "btSelectItem") {
      // Choose an ID
      let newId = $(el).closest("tr").find(".number").text();
      // Set it to the current checkbox
      $(el).prop("id", newId);
    }
  }
)

为了简化表格中复选框的选择，您可以向复选框列添加一个类(即:class="cb"):

<th data-field="cb" data-checkbox="true" class="cb" />

正如您在上面看到的，您可以使用 class="cb" 将事件更改的监听器附加到元素下的输入。

请参阅以下完整示例:

var $table = $('#table');
var mydata = 
[
    {
        number: 1,
        id: "Item 1",
        name: "Name 1"
    },
    {
        number: 2,
        id: "Item 2",
        name: "Name 2"
    },
    {
        number: 3,
        id: "Item 3",
        name: "Name 3"
    }
];

$(function () {
    $('.table').bootstrapTable({
        data: mydata
    });
    
    $(".cb input").each(
      (index, el) => {
        if($(el).attr("name") === "btSelectItem") {
          let newId = $(el).closest("tr").find(".number").text();
          $(el).prop("id", newId);
        }
      }
    ).change(
      function() {
        let selected = $(this);
        if(selected.attr("name") === "btSelectItem") {
          console.log("Selected: ", selected.prop("id"));
        }
      }
    );

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-12">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th data-field="cb" data-checkbox="true" class="cb" />
              <th data-field="number" class="number">Number</th>
              <th data-field="id">Item ID</th>
              <th data-field="name">Item Name</th>
            </tr>
          </thead>
        </table>
      </div>
   </div>
</div>

希望对你有帮助，再见。