如何用 jQuery 替换表中的 <td> 值（在每一行中）？ [关闭]答案

【问题标题】：How to replace <td> values in a table with jQuery (in every Rows)? [closed]如何用 jQuery 替换表中的 <td> 值（在每一行中）？ [关闭]
【发布时间】：2022-07-25 18:38:22
【问题描述】：

我有一个包含多列的表，其中一列名为：“类型”。类型列中的值可以是：1 或 2。我想用 jQuery 将每一行中的值“1”替换为“Information”，将值“2”替换为“Problem”，我该怎么做？

这取决于您的表格是否是常规的 html 表格。无论如何您肯定会得到答案，但如果您显示确切的 html 会更好
很公平。 :)

标签： javascript jquery loops html-table

【解决方案1】：

在此演示中，您将找到一个函数transformTableData()，它获取文档中存在的表并将：

查找以字符串“Type”为标题的字段的位置；
循环遍历其所有行并更改相应字段的值，因为结果来自顶部定义的映射。所以根据我定义的默认映射，如果字段值为'1'，它将被转换为'Information'，如果值为'2'，它将被转换为'Problem'；
如果地图中没有对应的值，该值将保持不变；

该功能在您单击页面底部的按钮时运行。当然，可以在准备好文档时调用相同的函数。

function transformTableData(){

  const map = {
    '1' : 'Information',
    '2' : 'Problem',
  }

  const typeHeaderCell = $('table thead tr th:contains(Type)');
  const typeHeaderIndex = $(typeHeaderCell).index();

  $('table tbody tr').each((i, row)=>{
    const rowCell = $(row).find(`td:nth-child(${typeHeaderIndex+1})`);
    const value = rowCell.text(); 
    rowCell.text( map?.[value] );    
  });

}

table, tr, th, td{
  border: solid 1px black;
  padding: 1rem;
}

button{
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.25rem;
  cursor: pointer;
}

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

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>...</th>
      <th>Type</th>      
      <th>...</th>
      <th>ColumnN</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>      
      <td>1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>      
      <td></td>
      <td></td>      
      <td>2</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>      
      <td></td>
      <td></td>      
      <td>INVALID</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<button onclick="transformTableData();">Transform Table Data</button>

【讨论】：

【解决方案2】：

有很多方法可以实现这样的目标。这是一个例子。它首先通过比较表头中每个单元格的文本来查找索引。然后它获取表体中的所有单元格以及每个表行中的索引，如果它是“1”或“2”，则替换内容。肯定有更短或更快的方法。

// Find index of column with "Type"
let index = -1;
let th = $('#myTable thead tr th');
for (let i=0; i<th.length; i++) {
    if ($(th[i]).text() == 'Type') {
    index = i;
    break;
  }
}

// If index is greater then -1 we found the column
if (index > -1) {
  // Get all the table cells in each row at the specific index (need to add +1 to the index)
  let td = $('#myTable tbody tr td:nth-child(' + (index+1) + ')');
    for (let i=0; i<td.length; i++) {
      // Compare content and replace it
      if ($(td[i]).text() == '1') {
        $(td[i]).text('Information');
      }
      else if ($(td[i]).text() == '2') {
        $(td[i]).text('Problem');
      }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Type</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>Maria</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>Walter</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1</td>
      <td>Julia</td>
    </tr>
  </tbody>
</table>

【讨论】：