Как назначить уникальный идентификатор для флажков, которые соответствуют его номеру строки (обновление: или идентификатор элемента) в Bootstrap 4?

Question

Я разрабатываю таблицу для отображения истории транзакций для детских товаров для курса javascript. Как назначить каждому флажку уникальный идентификатор, состоящий из последовательности номеров, соответствующей номеру строки?

Каркас показан ниже.

Каждая строка нумеруется по порядку, начиная с 1 до конца строки таблицы.

В крайнем правом столбце с помощью Bootstrap 4 я поставил флажок переключения, чтобы пользователь мог вручную выбрать,перечислить его / ее предмет для продажи («листинг») или завершить продажи («закончен»).

Мне сказали, что каждый идентификатор флажка должен быть уникальным, поэтому я намерен назвать вход-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>

Я ожидаю ввода идентификатора (т. е. toggle1, toggle2,..., toggle999) может быть сгенерирован и назначен автоматически, в соответствии с номером строки.

Я ожидаю конечный результат с id = "'toggle' + i".

Спасибо большоебольшое за вашу помощь.

Обновление: @cengiz sevimli напоминает мне, что может быть лучше назначить идентификатор флажка состояния с идентификатором элемента, так как он «более уникален», чем номера строк. Но как создать идентификатор, скажем, продукт с идентификатором пользователя # 000001 с отметкой времени - 000001-201910301600, например?

Answer 1

Позвольте мне сказать, что вам на самом деле не нужно присваивать уникальный идентификатор любому флажку, вы можете выбрать любую нужную вам информацию непосредственно из html в выбранной строке.

В любом случае, если вы хотитечтобы иметь идентификатор для выбранных элементов (только они будут отправлены с вашей формой), вы можете установить идентификатор для каждого входа в таблице (не 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>

Надеюсь, это поможет вам, пока.

Answer 2

Использование имен классов более уместно в этом случае. Когда вы создаете класс в CSS, вы можете добавить этот класс к любому желаемому HTML-тегу. Таким образом, вы можете повысить читабельность кода, возможность его повторного использования и гибкость. Но если вы запрашиваете фрагмент кода в JS, который генерирует уникальный идентификатор, см. Код ниже:

// 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);
};

источник: gordonbrander