如何在 Bootstrap 4 下為與其行號（更新：或項目 ID）對應的復選框分配唯一 ID？

Question

我正在設計一個表格來顯示 javascript 課程的嬰兒用品的交易歷史。 如何為每個復選框分配由與行號對應的數字序列組成的唯一ID？

線框如下圖所示。

每行按順序編號，從 1 開始到表格行的末尾。

在最右邊的列中，在 Bootstrap 4 的幫助下，我放置了一個切換復選框，以便用戶可以手動選擇是列出他/她的商品進行銷售（'listing'）還是結束銷售（'ended'）。

我被告知每個復選框 id 必須是唯一的，所以我打算根據它們各自的行號將每個復選框的輸入 id 命名為“toogle1”、“toogle2”等。

我的問題是：如何自動生成身份證號碼？

我對行號做了類似的練習，代碼如下：

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 添加到復選框列（即： 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>

希望對你有幫助，再見。

Answer 2

在這種情況下，使用 class 名稱更合適。 當您在 CSS 中創建 class 時，您可以將此 class 添加到任何您想要的 Z4C4AD5FCA2E7A3F74DBB1CED0038 標簽中。 通過這種方式，您可以提高代碼的可讀性、可重用性和靈活性。 但是，如果您在 JS 中詢問生成唯一 id 的代碼片段，請參見下面的代碼：

// Generate unique IDs for use as pseudo-private/protected names.
// Similar in concept to
// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
//
// The goals of this function are twofold:
// 
// * Provide a way to generate a string guaranteed to be unique when compared
//   to other strings generated by this function.
// * Make the string complex enough that it is highly unlikely to be
//   accidentally duplicated by hand (this is key if you're using `ID`
//   as a private/protected name on an object).
//
// Use:
//
//     var privateName = ID();
//     var o = { 'public': 'foo' };
//     o[privateName] = 'bar';
var ID = function () {
  // Math.random should be unique because of its seeding algorithm.
  // Convert it to base 36 (numbers + letters), and grab the first 9 characters
  // after the decimal.
  return '_' + Math.random().toString(36).substr(2, 9);
};

資料來源：戈登布蘭德