Question

我有一个表，我想为表中的每个td设置一个特定的ID。有关更多说明：

我有一张这样的桌子：

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

我想通过Jquery制作这样的表：

<table class="myTable">
  <tr class="tr">
    <td class="td" id="td1"></td>
    <td class="td" id="td2"></td>
    <td class="td" id="td3"></td>
    <td class="td" id="td4"></td>
  </tr>
  <tr class="tr">
    <td class="td" id="td5"></td>
    <td class="td" id="td6"></td>
    <td class="td" id="td7"></td>
    <td class="td" id="td8"></td>
  </tr>
</table>

请帮助我做到这一点，谢谢大家。

Answer 1

也许是这样？您可以使用each()来给您元素和索引。

$(document).ready(function() {
  $('.myTable td').each((i, e) => {
    $(e).attr('id', `td${(i + 1)}`);
    $(e).html(`td${(i + 1)}`);
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

Answer 2

在这种情况下，使用data attributes可能会更好。

这是jQuery方法：

$('td').each((i, cell) => {
  $(cell).attr("data-id", `td${i + 1}`);
});

这是同样简洁的香草JS方法：

document.querySelectorAll('td').forEach((cell, i) => {
  cell.dataset.id = `td${i + 1}`;
});

如果您有多个表，则像处理单元格一样在它们上循环，然后在该表的单元格上循环。这是一个普通的JS方法，它创建一个表ID，并将其与单元格ID一起使用以创建数据属性，例如：td2.1用于表2中的单元格1。如果运行该代码段并检查表元素，您会看到这种效果。

// Grab all the tables
const tables = document.querySelectorAll('table');

// Iterate over the tables
tables.forEach((table, tableIndex) => {

  // Create the tableId
  const tableId = tableIndex + 1;

  // Add a table id for each table
  table.dataset.id = `table${tableId}`

  // Grab the cells in each table
  const cells = table.querySelectorAll('td');

  // Iterate over each table cell
  cells.forEach((cell, cellIndex) => {

    // Create the cellId
    const cellId = cellIndex + 1;

    // Add the cell id
    cell.dataset.id = `td${tableId}.${cellId}`;
  });
});

<table class="myTable"><tr class="tr"><td class="td">1</td><td class="td">2</td><td class="td">3</td><td class="td">4</td></tr><tr class="tr"><td class="td">5</td><td class="td">6</td><td class="td">7</td><td class="td">8</td></tr></table>
<table class="myTable"><tr class="tr"><td class="td">1</td><td class="td">2</td><td class="td">3</td><td class="td">4</td></tr><tr class="tr"><td class="td">5</td><td class="td">6</td><td class="td">7</td><td class="td">8</td></tr></table>

以及jQuery版本：

// Iterate over the tables
$('table').each((tableIndex, table) => {

  // Create the tableId
  const tableId = tableIndex + 1;

  // Add a table id for each table
  $(table).attr('data-id', `table${tableId}`);

  // For each cell in the table
  $('td', table).each((cellIndex, cell) => {

    // Create the cellId
    const cellId = cellIndex + 1;

    // Add the cell id
    $(cell).attr('data-id', `td${tableId}.${cellId}`);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable"><tr class="tr"><td class="td">1</td><td class="td">2</td><td class="td">3</td><td class="td">4</td></tr><tr class="tr"><td class="td">5</td><td class="td">6</td><td class="td">7</td><td class="td">8</td></tr></table>
<table class="myTable"><tr class="tr"><td class="td">1</td><td class="td">2</td><td class="td">3</td><td class="td">4</td></tr><tr class="tr"><td class="td">5</td><td class="td">6</td><td class="td">7</td><td class="td">8</td></tr></table>

Answer 3

您需要循环.myTable的每个实例，然后找到所有td并对其进行循环。我已经删除了ES6功能。

$(document).ready(function() {
  // Loop each table
  $('.myTable').each(function (i, e) {
  
    // Loop each TD in the table
    $(e).find('td').each(function (i, e) {
    
      // Set the attribute id
      $(e).attr('id', 'td' + (i + 1));
      
      // Write it out for debugging
      $(e).html('td' + (i + 1));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

如何为表格的单元格设置特定的ID

3 个答案: