read tabel value using jquery

Question

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

In HTML, [IDs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) must be unique to the DOM tree. In other words, only one element can have the ID "status". You might try using a different ID for each element or (better yet) a common [class](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors). Also see [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — showdev, Mar 04 '21 at 05:21
You mentioned you have four `` elements. What are the IDs for the other three? — showdev, Mar 04 '21 at 05:26

KHIMAJI VALUKIYA · Accepted Answer · 2021-04-16T10:34:10.167

1

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>

edited Apr 16 '21 at 10:34

answered Mar 04 '21 at 05:31

KHIMAJI VALUKIYA

626
1
5
16

showdev · Answer 2 · 2021-03-04T05:41:42.900

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>

read tabel value using jquery

2 Answers2