Replace specific field in table using Jquery

Question

In this table :

$('#listview-table tr').each(function() {
    var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text();    
    alert(status_id);
 });

<table id="listview-table" class="table  listview-table " style="table-layout: fixed;">
ass="overflow-y">
        <tr class="listViewEntries" data-id="26322" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26322&amp;app=INVENTORY" id="Liens_listView_row_1">
          <td class="listViewRecordActions">
            <!--LIST VIEW RECORD ACTIONS-->
            <div class="table-actions">
              <span class="input">
                <input type="checkbox" value="26322" class="listViewEntriesCheckBox">
              </span>
              <span>
                <a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
              <span>
                <a class="markStar fa icon action  fa-star-o" title=" Suivre"></a>
              </span>
              <span class="more dropdown action">
                <span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-ellipsis-v icon"></i>
                </span>
                <ul class="dropdown-menu">
                  <li>
                    <a data-id="26322" href="index.php?module=Liens&amp;view=Detail&amp;record=26322&amp;mode=showDetailViewByMode&amp;requestMode=full&amp;tab_label=Liens Details&amp;app=INVENTORY">Details</a>
                  </li>
                  <li>
                    <a data-id="26322" href="javascript:void(0);" data-url="index.php?module=Liens&amp;view=Edit&amp;record=26322&amp;app=INVENTORY" name="editlink">Editer</a>
                  </li>
                  <li>
                    <a data-id="26322" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
                  </li>
                </ul>
              </span>
              <div class="btn-group inline-save hide">
                <button class="button btn-success btn-small save" type="button" name="save">
                  <i class="fa fa-check"></i>
                </button>
                <button class="button btn-danger btn-small cancel" type="button" name="Cancel">
                  <i class="fa fa-close"></i>
                </button>
              </div>
            </div>
          </td>
          <td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> EAS-FO-26263-BRETAGNE</span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> 185.169.242.136 </span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> 0 </span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
            <span class="fieldValue">
              <span class="value"></span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
            <span class="fieldValue">
              <span class="value">
                <span align="right">40</span>
              </span>
            </span>
            <span class="hide edit"></span>
          </td>
        </tr>
        <tr class="listViewEntries" data-id="26284" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26284&amp;app=INVENTORY" id="Liens_listView_row_2">
          <td class="listViewRecordActions">
            <!--LIST VIEW RECORD ACTIONS-->
            <div class="table-actions">
              <span class="input">
                <input type="checkbox" value="26284" class="listViewEntriesCheckBox">
              </span>
              <span>
                <a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
              <span>
                <a class="markStar fa icon action  fa-star-o" title=" Suivre"></a>
              </span>
              <span class="more dropdown action">
                <span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-ellipsis-v icon"></i>
                </span>
                <ul class="dropdown-menu">
                  <li>
                    <a data-id="26284" href="index.php?module=Liens&amp;view=Detail&amp;record=26284&amp;mode=showDetailViewByMode&amp;requestMode=full&amp;tab_label=Liens Details&amp;app=INVENTORY">Details</a>
                  </li>
                  <li>
                    <a data-id="26284" href="javascript:void(0);" data-url="index.php?module=Liens&amp;view=Edit&amp;record=26284&amp;app=INVENTORY" name="editlink">Editer</a>
                  </li>
                  <li>
                    <a data-id="26284" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
                  </li>
                </ul>
              </span>
              <div class="btn-group inline-save hide">
                <button class="button btn-success btn-small save" type="button" name="save">
                  <i class="fa fa-check"></i>
                </button>
                <button class="button btn-danger btn-small cancel" type="button" name="Cancel">
                  <i class="fa fa-close"></i>
                </button>
              </div>
            </div>
          </td>
          <td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> EAS-FO-640-EUROPE </span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> 192.42.221.11 </span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> 1 </span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
            <span class="fieldValue">
              <span class="value"> 5424954 </span>
            </span>
            <span class="hide edit"></span>
          </td>
          <td class="listViewEntryValue" data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
            <span class="fieldValue">
              <span class="value">
                <span align="right">39</span>
              </span>
            </span>
            <span class="hide edit"></span>
          </td>
        </tr>
      </tbody>
    </table>

I try to replace each field with data-name="cf_1525" containing 0 or 1, by Down or UP.

But I didn't know how can I select this and them replace it.

I tried this code, but it doesn't select :

$('#listview-table tr').each(function() {
    var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text();

  alert(status_id);
 });

Many thanks for your help !

Diego D · Accepted Answer · 2022-07-19 11:21:51Z

That code you are trying to use to loop through the table rows, find a given element and do something with that data, should be more like this:

$('#listview-table tr').each(function() {
  var status_id = $(this).find("[data-name~='cf_1525'].listViewEntryValue").text();
  console.log(status_id);
});

The find() function will filter the children elements having those given conditions: the attribute data-name containing the word cf_1525 and the class listViewEntryValue.

Plus for diagnostics purposes, both original value and transformed value get printed on console for each single row processed. And I added a css class that will better highlight that table cell (of course just remove the css rule to style it as default)

Then following your words:

I try to replace each field with data-name="cf_1525" containing 0 or 1, by Down or UP.

That value gets transformed to Up if it was 1 and to Down if it was 1. Otherwise the value will remain untouched. Such value gets set both on the contents and on data-rawvalue attribute.

This is the whole demo (but using the required assets):

$('#listview-table tr').each(function() {
  const el = $(this).find("[data-name~='cf_1525'].listViewEntryValue");
  var status_id = el.text().trim();
  
  let transformedValue = status_id;
  if (status_id == '0')
    transformedValue = 'Down';
  else if (status_id == '1')
    transformedValue = 'Up';    
  
  //updates the data-rawvalue attribute
  el[0].dataset.rawvalue = transformedValue;
  //updates the text content
  el.find('.fieldValue > .value').text(transformedValue);
  
  console.log(`original:"${status_id}" transformed:"${transformedValue}"`);
});

[data-name~='cf_1525'].listViewEntryValue {
  color: red;
  font-weight: 600;
  border: solid 4px gray;
  padding: 0 1rem;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<table id="listview-table" class="table  listview-table " style="table-layout: fixed;">

  <tr class="listViewEntries" data-id="26322" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26322&amp;app=INVENTORY" id="Liens_listView_row_1">
    <td class="listViewRecordActions">
      <!--LIST VIEW RECORD ACTIONS-->
      <div class="table-actions">
        <span class="input">
                <input type="checkbox" value="26322" class="listViewEntriesCheckBox">
              </span>
        <span>
                <a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
        <span>
                <a class="markStar fa icon action  fa-star-o" title=" Suivre"></a>
              </span>
        <span class="more dropdown action">
                <span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-ellipsis-v icon"></i>
                </span>
        <ul class="dropdown-menu">
          <li>
            <a data-id="26322" href="index.php?module=Liens&amp;view=Detail&amp;record=26322&amp;mode=showDetailViewByMode&amp;requestMode=full&amp;tab_label=Liens Details&amp;app=INVENTORY">Details</a>
          </li>
          <li>
            <a data-id="26322" href="javascript:void(0);" data-url="index.php?module=Liens&amp;view=Edit&amp;record=26322&amp;app=INVENTORY" name="editlink">Editer</a>
          </li>
          <li>
            <a data-id="26322" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
          </li>
        </ul>
        </span>
        <div class="btn-group inline-save hide">
          <button class="button btn-success btn-small save" type="button" name="save">
                  <i class="fa fa-check"></i>
                </button>
          <button class="button btn-danger btn-small cancel" type="button" name="Cancel">
                  <i class="fa fa-close"></i>
                </button>
        </div>
      </div>
    </td>
    <td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> EAS-FO-26263-BRETAGNE</span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> 185.169.242.136 </span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> 0 </span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
      <span class="fieldValue">
              <span class="value"></span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
      <span class="fieldValue">
              <span class="value">
                <span align="right">40</span>
      </span>
      </span>
      <span class="hide edit"></span>
    </td>
  </tr>
  <tr class="listViewEntries" data-id="26284" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26284&amp;app=INVENTORY" id="Liens_listView_row_2">
    <td class="listViewRecordActions">
      <!--LIST VIEW RECORD ACTIONS-->
      <div class="table-actions">
        <span class="input">
                <input type="checkbox" value="26284" class="listViewEntriesCheckBox">
              </span>
        <span>
                <a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
        <span>
                <a class="markStar fa icon action  fa-star-o" title=" Suivre"></a>
              </span>
        <span class="more dropdown action">
                <span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-ellipsis-v icon"></i>
                </span>
        <ul class="dropdown-menu">
          <li>
            <a data-id="26284" href="index.php?module=Liens&amp;view=Detail&amp;record=26284&amp;mode=showDetailViewByMode&amp;requestMode=full&amp;tab_label=Liens Details&amp;app=INVENTORY">Details</a>
          </li>
          <li>
            <a data-id="26284" href="javascript:void(0);" data-url="index.php?module=Liens&amp;view=Edit&amp;record=26284&amp;app=INVENTORY" name="editlink">Editer</a>
          </li>
          <li>
            <a data-id="26284" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
          </li>
        </ul>
        </span>
        <div class="btn-group inline-save hide">
          <button class="button btn-success btn-small save" type="button" name="save">
                  <i class="fa fa-check"></i>
                </button>
          <button class="button btn-danger btn-small cancel" type="button" name="Cancel">
                  <i class="fa fa-close"></i>
                </button>
        </div>
      </div>
    </td>
    <td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> EAS-FO-640-EUROPE </span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> 192.42.221.11 </span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> 1 </span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
      <span class="fieldValue">
              <span class="value"> 5424954 </span>
      </span>
      <span class="hide edit"></span>
    </td>
    <td class="listViewEntryValue" data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
      <span class="fieldValue">
              <span class="value">
                <span align="right">39</span>
      </span>
      </span>
      <span class="hide edit"></span>
    </td>
  </tr>
  </tbody>
</table>

This is exactly what I search. And them How Can I replace 0 OR 1, by Down or UP ?
I updated the answer with the logic to change both the text content and the data attribute value with the transformation suggested.

Collectives™ on Stack Overflow

Replace specific field in table using Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related