CODEWITHSUNDEEP
javascriptjquerydom-events
funderjimed ieinc
funderjimed ieinc

Reputation: 62

read tabel value using jquery

good morning i wanna try to hide an icon using jquery in table data, if table data value reject then icon hide. but it doesnt seem right

<tr>            
    <td id="status"><?php echo $row[PO_Status]; ?></td>
    <td>
        <center>
            <a id="edit" href="./page.php?page=editdatapo&id=<?php echo $row[id]; ?>">
               <button type="button" class="btn btn-default btn-sm">
                 <span class="glyphicon glyphicon-pencil"></span>
               </button>
            </a>
        </center>
    </td>
</tr>

<script>
    $("#status").each(function() {
    var status = $(this).text();
    console.log(status);
    });
if (status = 'reject'){
$("#edit").hide();
}
</script>

i have 4 td Approve,Approve,reject,reject when i check console it print Approve,Approve,Approve,Approve

Upvotes: 1

Views: 51

Answers (2)

KHIMAJI VALUKIYA
KHIMAJI VALUKIYA

Reputation: 626

As per HTML Standard you can give id only on time in a page, If there are 1 id multiple time then you have to use find().

<script>
    $("tr").find("#status").each(function() {
        var status = $(this).html();
        if (status == 'reject'){
            $(this).parent("tr").find("#edit").hide();
        }
    });
</script>

Upvotes: 1

showdev
showdev

Reputation: 29168

IDs must be unique to the HTML DOM tree.
For recurrent use, I recommend using classes instead.

The condition to test status against "reject" should go inside the each loop.
You're testing each element to see if its status is "reject".

The = assigns a value while == compares equivalence.

You'll need to traverse from the clicked .status to its associated .edit element in the next cell. I do this by moving up to the closest <tr> and then searching for the .edit element within that row.

$('.status').each(function() {
  let $this = jQuery(this);
  let status = $this.text();
  console.log(status);
  if (status == 'reject') {
    $this.closest('tr').find('.edit').hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="status">one</td>
      <td>
        <center>
          <a class="edit" href="./page.php?page=editdatapo&id=1">edit</a>
        </center>
      </td>
    </tr>
    <tr>
      <td class="status">reject</td>
      <td>
        <center>
          <a class="edit" href="./page.php?page=editdatapo&id=2">edit</a>
        </center>
      </td>
    </tr>
    <tr>
      <td class="status">three</td>
      <td>
        <center>
          <a class="edit" href="./page.php?page=editdatapo&id=3">edit</a>
        </center>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions