我如何使用jQuery分配和循环tr编号作为id?

zdwk9cvp  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(110)

我想计算表的行数,然后根据<table>中的行数为<table>中的每个<tr>分配一个id号。
我做了这样的计算:

var currentIndex = $('table tbody tr').length

我得到了行数然后,当我试图循环遍历这些行时,它将所有行中的id更改为相同的id。
例如,我需要这样做,对于第1行,id1,对于第2行,id2,等等。

function generateId() {

    for (i = 0; i < $('table tbody tr').length; i++) {
        console.log('Hello World', + i -1);
        $('table  tbody tr td :input').attr('id', + i).attr('name', + i).prop('class', 'form-control form-control-sm form-control-solid formInput-' + i);
        //$('table tbody tr td :input').attr('name', + i);
        //$('#table tbody tr td :input').attr('class', 'form-control form-control-sm form-control-solid' + i);
    }

任何想法??!!

tyg4sfes

tyg4sfes1#

根据行数为每一行给予id。你可以这样做:

const rows = $('table tbody tr');
for (i = 0; i < rows.length; i++) {
   let row = $(rows)[i];
   let input = $(row).children('td').children('input');
   $(row).attr('id', i+1);
   $(input).attr('id', i+1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
      <th>#</th>
      <th>First Name</th>
    </thead>
    <tbody>
      <tr>
        <td>01</td>
        <td>John</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>02</td>
        <td>John</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>03</td>
        <td>John</td>
        <td><input type="text" /></td>
      </tr>
    </tbody>
  </table>
r9f1avp5

r9f1avp52#

你可以这样做:

$('table  tbody tr td :input').attr("id",function() {
  return "idprefix"+$('table  tbody tr td :input').index($(this));
});

另外,不建议id是数字。

Demo

$('table  tbody tr td :input').attr("id",function() {
  return "idprefix"+$('table  tbody tr td :input').index($(this));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input />
      </td>
    </tr>
    <tr>
      <td>
        <input />
      </td>
    </tr>
    <tr>
      <td>
        <input />
      </td>
    </tr>
    <tr>
      <td>
        <input />
      </td>
    </tr>
  </tbody>
</table>

相关问题