How to change table tr TD value change query-CodePudding

I have a table and want to change the data-title="Status" value.

For Example : data-status text is DataSubmission means need to change the value as 'Inprogress'

Below the code please check:

$("#cpC_gvSearchResult tr td:contains('DataSubmission')").html("In Progress");

If data-title="Status - text value is empty or blank we want to change the value 'Available'

$("#cpC_gvSearchResult tr td:contains('')").html("Available");

This the code :

<table  cellspacing="0" data-openonpick="False" id="cpC_gvSearchResult" style="border-collapse:collapse;">
   <thead>
      <tr >
         <th data-field="ApplicationId" scope="col"> Id</th>
         <th data-field="ApplicantFirstName" scope="col">First Name</th>
         <th data-field="CurrentQueue" scope="col">Status</th>
      </tr>
   </thead>
   <tbody>
      <tr >
         <td  data-title="Application Id">1</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr >
         <td  data-title="Application Id">2</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
      <tr >
         <td  data-title="Application Id">3</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr >
         <td  data-title="Application Id">4</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
   </tbody>
</table>

Jquery:

var rowCount = $("#cpC_gvSearchResult tr").length;
alert(rowCount);
for(var i = 1; i < rowCount; i  )
{
  var status = $("#cpC_gvSearchResult tr").find("td:eq(3)").text();
  if(status =="DataSubmission" )
  {
     $("#cpC_gvSearchResult tr td:contains('DataSubmission')").html("In Progress");
  }
  else
  {
     $("#cpC_gvSearchResult tr td:contains('')").html("Available");
  }
    
}

Live:Demo

CodePudding user response：

You have three issues:

$("#id tr") will get all rows, so td:eq(n) will always find just the first one as it's tds across all rows not just the one in the loop.

Simplest fix without changing any other code is $("#id tr").eq(i)

you want td :eq(2) as it's 0-based, so (2) = 3rd col.

Giving

for(var i = 1; i < rowCount; i  )
{
  var status = $("#cpC_gvSearchResult tr").eq(i).find("td:eq(2)").text();

https://jsfiddle.net/pyfxLc2w/

your else checks for '' but you have   which is not ''

if you debug it in your fiddle, it's ==' '

In general, rather than make a selection and property (eg $("tr").length and $("tr").find(..).text() - make the selection and keep that selection in a variable, then get the property, This makes this so much easier in your code, eg:

var td = $("#cpC_gvSearchResult tr").eq(i).find("td:eq(2)");
if (td.text() == "DataSubmission")
   td.text("In Progress")
else
   td.text("Available")

without needing to rehash the selectors

Also note that jquery works with collections as a whole, so your entire code could just be:

$("#cpC_gvSearchResult tr td:contains('DataSubmission')").html("In Progress");
$("#cpC_gvSearchResult tr td:containsExact(' ')").html("Available");

See this answer to add a :containsExact filter

If you want more control that :contains gives you, then you can use .html() overload that also works on a jquery collection (no need for loops)

You need .html() in order to access the  , and in my testing .trim() didn't remove it. If it was just whitespace, you could use .text((i, txt) =>.

Note, with :nth-child, it's 1-based, so now does need to be (3), not (2).

$("#cpC_gvSearchResult tr td:nth-child(3)").html((i, txt) => {
  return txt == "DataSubmission" 
  ? "In Progress" 
  : txt.replace(/&nbsp;/g, '') == "" 
    ? "Available" 
    : txt
});

$("#cpC_gvSearchResult tr td:nth-child(3)").html((i, txt) => {
  return txt == "DataSubmission" 
  ? "In Progress" 
  : txt.replace(/&nbsp;/g, '') == "" 
    ? "Available" 
    : txt
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table  cellspacing="0" data-openonpick="False" id="cpC_gvSearchResult" style="border-collapse:collapse;">
  <thead>
    <tr >
      <th data-field="ApplicationId" scope="col"> Id</th>
      <th data-field="ApplicantFirstName" scope="col">First Name</th>
      <th data-field="CurrentQueue" scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td  data-title="Application Id">1</td>
      <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td  data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
    </tr>
    <tr >
      <td  data-title="Application Id">2</td>
      <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td  data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
    </tr>
    <tr >
      <td  data-title="Application Id">3</td>
      <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td  data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
    </tr>
    <tr >
      <td  data-title="Application Id">4</td>
      <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td  data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

A bit unclear what you want to do or why . But here's a solution.

const tdStatusCols = $("table tbody td[data-title='Status']")
$(tdStatusCols).each(function() {
  const statusText = $(this).text().trim()
  if ( statusText === 'DataSubmission' ) {
      $(this).text("In Progress" )
 } else if (  statusText === '' ) {
     $(this).text("Available" )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table  cellspacing="0" data-openonpick="False" id="cpC_gvSearchResult" style="border-collapse:collapse;">
   <thead>
      <tr >
         <th data-field="ApplicationId" scope="col"> Id</th>
         <th data-field="ApplicantFirstName" scope="col">First Name</th>
         <th data-field="CurrentQueue" scope="col">Status</th>
      </tr>
   </thead>
   <tbody>
      <tr >
         <td  data-title="Application Id">1</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr >
         <td  data-title="Application Id">2</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
      <tr >
         <td  data-title="Application Id">3</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr >
         <td  data-title="Application Id">4</td>
         <td  data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td  data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
   </tbody>
</table>