How to replace <td> values in a table with jQuery (in every Rows)?-CodePudding

I have a table with multiple columns, one column named: ‘Type’. The values in Type column could be: 1 or 2. I want to replace the value “1” to “Information” and the value “2” to “Problem” in every row with jQuery, how can I do that?

CodePudding user response：

Here in this demo you'll find a function transformTableData() that takes the table existing in the document and will:

find where is located the field having as header the string "Type";
loop through all its rows and change the value of the corresponding field as the result coming out of the map defined on top. So according to the default map I defined, if the field value is '1' it will be transformed to 'Information' and if the value is '2' it will be transformed to 'Problem';
If there's no corresponding value in the map, the value will be untouched;

The function runs when you click the button on the bottom of the page. Of course the same function could be called on document ready.

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>

CodePudding user response：

There are many ways to achieve something like this. Here is one example. It first looks for the index by comparing the text of each cell in the table header. then it gets all cells in the table body with the index in each table row and replaces the content if it is "1" or "2". There are for sure even shorter or faster methods.

// 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>