Tips for updating table row TD value using a query

I need to update the data-title="Status" value in a table.

For example, if the data-status text is "DataSubmission", it should be changed to 'Inprogress'

Here's the code snippet:

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

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

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

This is the code for the table:

<table class="inbox appList" cellspacing="0" data-openonpick="False" id="cpC_gvSearchResult" style="border-collapse:collapse;">
   <thead>
      <tr class="inboxHeader">
         <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 class="inboxRow closedApp">
         <td class="inboxCol" data-title="Application Id">1</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr class="inboxAltRow closedApp">
         <td class="inboxCol" data-title="Application Id">2</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
      <tr class="inboxRow closedApp">
         <td class="inboxCol" data-title="Application Id">3</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr class="inboxAltRow closedApp">
         <td class="inboxCol" data-title="Application Id">4</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
   </tbody>
</table>

Jquery script:

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");
  }
    
}

View the live demo here

javascripthtmljquerycss

Answer №1

You are facing three key issues:

  1. $("#id tr") is selecting all rows, so td:eq(n) will only target the first one as it traverses all rows instead of just within the loop.

The simplest solution without altering any other code would be to use $("#id tr").eq(i)

  1. If you need td element at index 2, utilize :eq(2) because it follows a zero-based indexing system where (2) corresponds to the third column.

This results in the following:

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

https://jsfiddle.net/pyfxLc2w/

  1. Your else condition checks for '', but there is actually &nbsp; present which is not equal to ''

Upon debugging in your fiddle, it evaluates to ==' '

In general practice, rather than repeatedly making selections and accessing properties (e.g., $("tr").length and 

$("tr").find(..).text()</code), retain the selection in a variable for easier access:</p>
<pre><code>var td = $("#cpC_gvSearchResult tr").eq(i).find("td:eq(2)");
if (td.text() == "DataSubmission")
   td.text("In Progress")
else
   td.text("Available")

Eliminating the need to re-declare selectors repeatedly

Additionally, bear in mind that jQuery operates on collections as a whole, allowing your entire operation to be succinctly written as:

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

Refer to this answer for an added :containsExact filter explanation

If more customization beyond :contains functionality is needed, leverage the .html() function along with jQuery collection manipulation for a cleaner approach

Utilize .html() to access &nbsp;; from my assessments .trim() does not remove it efficiently. In cases with pure whitespace, .text((i, txt) => could work.

Note: When using :nth-child, remember it's indexed starting from 1, so it should now be referenced as (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 class="inbox appList" cellspacing="0" data-openonpick="False" id="cpC_gvSearchResult" style="border-collapse:collapse;">
  <thead>
    <tr class="inboxHeader">
      <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 class="inboxRow closedApp">
      <td class="inboxCol" data-title="Application Id">1</td>
      <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
    </tr>
    <tr class="inboxAltRow closedApp">
      <td class="inboxCol" data-title="Application Id">2</td>
      <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
    </tr>
    <tr class="inboxRow closedApp">
      <td class="inboxCol" data-title="Application Id">3</td>
      <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
    </tr>
    <tr class="inboxAltRow closedApp">
      <td class="inboxCol" data-title="Application Id">4</td>
      <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
      <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer №2

It seems a bit unclear what your intentions are or the reasoning behind them. Nevertheless, here is a possible 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 class="inbox appList" cellspacing="0" data-openonpick="False" id="cpC_gvSearchResult" style="border-collapse:collapse;">
   <thead>
      <tr class="inboxHeader">
         <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 class="inboxRow closedApp">
         <td class="inboxCol" data-title="Application Id">1</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr class="inboxAltRow closedApp">
         <td class="inboxCol" data-title="Application Id">2</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
      <tr class="inboxRow closedApp">
         <td class="inboxCol" data-title="Application Id">3</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">DataSubmission</td>
      </tr>
      <tr class="inboxAltRow closedApp">
         <td class="inboxCol" data-title="Application Id">4</td>
         <td class="inboxCol" data-title="Entity / Individual First Name" data-sid="al_Cust05">Dummy Name</td>
         <td class="inboxCol" data-title="Status" data-sid="al_ApplicantFirstName">&nbsp;</td>
      </tr>
   </tbody>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable the input field to function as a numerical input for both desktop and mobile platforms

In my app, there is an input field set as type number where users can click to increase or decrease the value or manually input a number. <input type="number" name="quantity" id="quantity" value="1" class="form-control" min="1"> However, when I sw ...

jqueryhtml

The Wagtail/Django block is struggling to properly display content from a custom or nested StructBlock template

I have a block in the header of my base template that will apply "extra" CSS styles. These styles are dynamic and based on fields from a Wagtail CMS instance. In the base.html template, I define: <head> {% block extra_css %}{% endblock %} </he ...

pythoncssdjangotemplateswagtail

Internet Explorer no longer supports SCRIPT tags in AJAX responses

We are currently facing an issue in our project where AJAX returns some code, and we utilize innerHTML to insert this code into a DIV. Subsequently, we scan this DIV for all script tags and execute the contents of these script tags using EVAL() (which add ...

javascriptajaxinternet-explorerinnerhtmlscript-tag

Redirect to URL using Ajax upon successful completion

I'm facing an issue with my function as it doesn't redirect after a successful operation. I'm not sure why the redirection is not happening consistently. Sometimes, adding ...href after e.preventDefault(); seems to work. $('#nadwozie&a ...

javascriptajaxhttp-redirect

Tips for styling table rows with CSS

Looking to add background color to every other row in an HTML table? This is my current CSS: .licList { width: 100%; border: 1px solid #f7f7f7; text-align: center; border-collapse: collapse; } .licList th ...

c#jqueryasp.nethtml

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

javascripthtmlapple-sign-in

How to reverse an object using jQuery.each

HTML: <input id="sdata" type="hidden" value='{"1651":["12","1"],"1650":["30","0"],"1649":["20","0"],"1648":["13","2"],"1647":["11","0"],"1646":["10","0"],"1645":["12","0"],"1644":["8","0"],"1643":["16","1"],"1642":["10","1"],"1641":["10","0"],"164 ...

javascriptjqueryobject

Issue with referencing Asmx web service

I am struggling to properly reference my web service method with JavaScript on my client page. I keep receiving an error message that says "CalendarHandler is not defined". <%@ WebService Language="C#" CodeBehind="~/App_Code/CalendarHandler.cs" Class ...

javascriptasp.netajaxweb-servicesasmx

I am having trouble setting the z-index for the navigation component in Tailwind CSS and Next.js

Currently, I am immersed in a Next.js project that utilizes Tailwind.css. Within this project, there is a header component known as nav, styled as follows: <div className="sticky top-0 z-100 body bg-white flex flex-row items-center">Nav con ...

cssreactjsnext.jstailwind-cssz-index

Fade in and out a Div with a distinct class and ID

I'm currently experiencing a minor issue with some jQuery code. Below are some divs: <div class="add" id="1">Follow</div> <div class="added" id="1">Following</div> <div class="add" id="2">Follow</div> <div clas ...

javascriptjquery

Is it possible to manipulate a parent component's state with a child component?

I have been experimenting with Material UI's react modal to create a modal as my child component. In the parent component, I have set up a state that controls the visibility of the modal and added a button inside the modal to close it. However, this s ...

javascriptreactjsmaterial-ui

AngularJS - Exchange data between controllers through shared scope

I've encountered a situation with a textarea in my HTML that looks like this: <textarea ng-model="commentBox"></textarea> In one of my controllers, I can easily access the content of the textarea using "$scope.commentBox". However, I&apo ...

javascripthtmlangularjs

When I bind the submit event to my form, the form is automatically submitted using the default handler

This issue occurs in both IE and Firefox, but not in Chrome. Here is the form structure: <form id="enviaEmail" method="post"> <label for="nombre">Nombre</label> <input id="nombre" type="text" name="nom ...

javascriptjqueryhtmlajaxforms

Using jQuery to dynamically add a value to a comment string

Is there a way to dynamically include tomorrow's start and end times in the message for the setupOrderingNotAvailable function if today's end time has passed? The current message states that online ordering will be available again tomorrow from 1 ...

javascriptjquery

Utilizing a function within a span element

Can anyone help me figure out what I'm doing wrong while trying to toggle between a span and an input text field using the on function? If you want to take a look, I've created a fiddle for it here User Interface <div> <span >My va ...

javascriptjqueryhtml

The PHP-generated form is not able to submit via AJAX

My select element includes ROWID in the value along with a name in the value field. <select name="opcoes" onchange="showInfo(this.value)"> <option value=''>Select</option> <option value=6>A</option> <option valu ...

phpjavascriptjqueryajaxhtml

Is Using Web Workers for AJAX Calls an Over-Optimization?

Currently, I am working on a code that manages all AJAX requests using Web Workers (where available). These workers are mainly handling the XMLHttpRequest object without any additional computations. All requests initiated by the workers are asynchronous (r ...

javascriptajaxasynchronousweb-worker

Tips for updating the hover background color of a table row with a unique class in bootstrap

Modified: Here is the table along with its corresponding CSS styling: .table-hover tbody tr:hover { background-color: #fff !important; } <html lang="en"> <head> <meta charset="utf-8" /> <meta name="v ...

cssbootstrap-5

Tomcat encounters difficulty accessing the JavaScript directory

Seeking assistance with my first question regarding Angular tutorials. When I deploy to test the script, I encounter an HTTP 404 error. I have tried various solutions suggested for similar issues without success. It appears to be a path problem as the ang ...

javascriptangularjstomcatservletsdeployment

Discover optimized ways to search for and sort through deeply embedded objects

In Vue3, I am working with the object $products, which looks like this: [{ "id": 1, "item": "Product 1", "productcategories": [{ "id": 300, "title": "Category300&quo ...

javascriptvue.jsperformancesortingfilter