Home > Mobile >  Replace specific field in table using Jquery
Replace specific field in table using Jquery

Time：07-19

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"  style="table-layout: fixed;">
ass="overflow-y">
        <tr  data-id="26322" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26322&amp;app=INVENTORY" id="Liens_listView_row_1">
          <td >
            <!--LIST VIEW RECORD ACTIONS-->
            <div >
              <span >
                <input type="checkbox" value="26322" >
              </span>
              <span>
                <a  data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
              <span>
                <a  title=" Suivre"></a>
              </span>
              <span >
                <span href="javascript:;"  data-toggle="dropdown">
                  <i ></i>
                </span>
                <ul >
                  <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);" >Supprimer</a>
                  </li>
                </ul>
              </span>
              <div >
                <button  type="button" name="save">
                  <i ></i>
                </button>
                <button  type="button" name="Cancel">
                  <i ></i>
                </button>
              </div>
            </div>
          </td>
          <td  data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
            <span >
              <span > EAS-FO-26263-BRETAGNE</span>
            </span>
            <span ></span>
          </td>
          <td  data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
            <span >
              <span > 185.169.242.136 </span>
            </span>
            <span ></span>
          </td>
          <td  data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
            <span >
              <span > 0 </span>
            </span>
            <span ></span>
          </td>
          <td  data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
            <span >
              <span ></span>
            </span>
            <span ></span>
          </td>
          <td  data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
            <span >
              <span >
                <span align="right">40</span>
              </span>
            </span>
            <span ></span>
          </td>
        </tr>
        <tr  data-id="26284" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26284&amp;app=INVENTORY" id="Liens_listView_row_2">
          <td >
            <!--LIST VIEW RECORD ACTIONS-->
            <div >
              <span >
                <input type="checkbox" value="26284" >
              </span>
              <span>
                <a  data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
              <span>
                <a  title=" Suivre"></a>
              </span>
              <span >
                <span href="javascript:;"  data-toggle="dropdown">
                  <i ></i>
                </span>
                <ul >
                  <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);" >Supprimer</a>
                  </li>
                </ul>
              </span>
              <div >
                <button  type="button" name="save">
                  <i ></i>
                </button>
                <button  type="button" name="Cancel">
                  <i ></i>
                </button>
              </div>
            </div>
          </td>
          <td  data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
            <span >
              <span > EAS-FO-640-EUROPE </span>
            </span>
            <span ></span>
          </td>
          <td  data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
            <span >
              <span > 192.42.221.11 </span>
            </span>
            <span ></span>
          </td>
          <td  data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
            <span >
              <span > 1 </span>
            </span>
            <span ></span>
          </td>
          <td  data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
            <span >
              <span > 5424954 </span>
            </span>
            <span ></span>
          </td>
          <td  data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
            <span >
              <span >
                <span align="right">39</span>
              </span>
            </span>
            <span ></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 !

CodePudding user response：

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"  style="table-layout: fixed;">

  <tr  data-id="26322" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26322&amp;app=INVENTORY" id="Liens_listView_row_1">
    <td >
      <!--LIST VIEW RECORD ACTIONS-->
      <div >
        <span >
                <input type="checkbox" value="26322" >
              </span>
        <span>
                <a  data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
        <span>
                <a  title=" Suivre"></a>
              </span>
        <span >
                <span href="javascript:;"  data-toggle="dropdown">
                  <i ></i>
                </span>
        <ul >
          <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);" >Supprimer</a>
          </li>
        </ul>
        </span>
        <div >
          <button  type="button" name="save">
                  <i ></i>
                </button>
          <button  type="button" name="Cancel">
                  <i ></i>
                </button>
        </div>
      </div>
    </td>
    <td  data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
      <span >
              <span > EAS-FO-26263-BRETAGNE</span>
      </span>
      <span ></span>
    </td>
    <td  data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
      <span >
              <span > 185.169.242.136 </span>
      </span>
      <span ></span>
    </td>
    <td  data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
      <span >
              <span > 0 </span>
      </span>
      <span ></span>
    </td>
    <td  data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
      <span >
              <span ></span>
      </span>
      <span ></span>
    </td>
    <td  data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
      <span >
              <span >
                <span align="right">40</span>
      </span>
      </span>
      <span ></span>
    </td>
  </tr>
  <tr  data-id="26284" data-recordurl="index.php?module=Liens&amp;view=Detail&amp;record=26284&amp;app=INVENTORY" id="Liens_listView_row_2">
    <td >
      <!--LIST VIEW RECORD ACTIONS-->
      <div >
        <span >
                <input type="checkbox" value="26284" >
              </span>
        <span>
                <a  data-app="INVENTORY" title="Vue Rapide"></a>
              </span>
        <span>
                <a  title=" Suivre"></a>
              </span>
        <span >
                <span href="javascript:;"  data-toggle="dropdown">
                  <i ></i>
                </span>
        <ul >
          <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);" >Supprimer</a>
          </li>
        </ul>
        </span>
        <div >
          <button  type="button" name="save">
                  <i ></i>
                </button>
          <button  type="button" name="Cancel">
                  <i ></i>
                </button>
        </div>
      </div>
    </td>
    <td  data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
      <span >
              <span > EAS-FO-640-EUROPE </span>
      </span>
      <span ></span>
    </td>
    <td  data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
      <span >
              <span > 192.42.221.11 </span>
      </span>
      <span ></span>
    </td>
    <td  data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
      <span >
              <span > 1 </span>
      </span>
      <span ></span>
    </td>
    <td  data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
      <span >
              <span > 5424954 </span>
      </span>
      <span ></span>
    </td>
    <td  data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
      <span >
              <span >
                <span align="right">39</span>
      </span>
      </span>
      <span ></span>
    </td>
  </tr>
  </tbody>
</table>

Page link：https//www.codepudding.com/Mobile/480710.html

Prev:i'm getting this error in my code --> Uncaught Error: Invariant failed: You should not use &
Next:Jquery Datatable warning when adding data: Requested unknown parameter
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding