Not able to Get td value of Current Row on Button Click Inside The DIV-CodePudding

I need to get value of 3 but its Returning whole html.

<div id="ExtraDt" style="overflow: auto; height:500px; width:100%; background-color: #FFFFFF; top: 0px;">
   <table id="MasterList1"  style="width:100%; background-color: #fff; margin: 0px 0 0px 0;border: solid 1px #525252;border-collapse:collapse;font-size:11px;font-family:Verdana;text-align:left;font-weight:normal; color: #515251;" border="1">
      <tbody>
         <tr>
            <td>3</td>
            <td>PUSPENDRA KAILASH BHURIYA S/O    </td>
            <td>A17 - NEW VEHICLE  LOAN</td>
            <td>003016000005</td>
            <td>12000.00</td>
            <td>2500.00</td>
            <td>6300.00</td>
            <td>1.00</td>
            <td>3350.00</td>
            <td>2.00</td>
            <td>3.00</td>
            <td>4.00</td>
            <td>19000.00</td>
            <td><input type="button" id="btnApprove"  value="Approve" runat="server" style="height:24px; width:82px;" tabindex="5" onclick="Approve(); return false;"></td>
            <td><input type="button" id="btnReject"  value="Reject" runat="server" style="height:24px; width:82px;" tabindex="6" onclick="Reject(); return false;"></td>
         </tr>
         <tr>
            <td>4</td>
            <td>RAKESH MANGILAL VERMA S/O    </td>
            <td>A17 - NEW VEHICLE  LOAN</td>
            <td>003016000015</td>
            <td>13000.00</td>
            <td>3000.00</td>
            <td>5600.00</td>
            <td>1.00</td>
            <td>5600.00</td>
            <td>2.00</td>
            <td>3.00</td>
            <td>4.00</td>
            <td>20000.00</td>
            <td><input type="button" id="btnApprove"  value="Approve" runat="server" style="height:24px; width:82px;" tabindex="5" onclick="Approve(); return false;"></td>
            <td><input type="button" id="btnReject"  value="Reject" runat="server" style="height:24px; width:82px;" tabindex="6" onclick="Reject(); return false;"></td>
         </tr>
         <tr>
            <td>5</td>
            <td>MAGAN JUVANSHING CHOUHAN S/O    </td>
            <td>A17 - NEW VEHICLE  LOAN</td>
            <td>003016000023</td>
            <td>15000.00</td>
            <td>4500.00</td>
            <td>5600.00</td>
            <td>1.00</td>
            <td>8900.00</td>
            <td>2.00</td>
            <td>3.00</td>
            <td>4.00</td>
            <td>25000.00</td>
            <td><input type="button" id="btnApprove"  value="Approve" runat="server" style="height:24px; width:82px;" tabindex="5" onclick="Approve(); return false;"></td>
            <td><input type="button" id="btnReject"  value="Reject" runat="server" style="height:24px; width:82px;" tabindex="6" onclick="Reject(); return false;"></td>
         </tr>
      </tbody>
   </table>
</div>

function Approve() {
           
            var customerId = 0;
            
            customerId = $('#MasterList1').closest('tr').find('td:eq(0)').html();
            
            console.log(customerId);
        }

CodePudding user response：

Believe that you are trying to get the ID column on the same row in which the 'Approved' button is clicked.

With $(event.target) to get the element of clicked 'Approved' button. Hence it will able to get the ID column for the respective row.

customerId = $(event.target).closest('tr').find('td:eq(0)').html();

Demo

function Approve() {

  var customerId = 0;

  customerId = $(event.target).closest('tr').find('td:eq(0)').html();

  console.log(customerId);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="ExtraDt" style="overflow: auto; height:500px; width:100%; background-color: #FFFFFF; top: 0px;">
  <table id="MasterList1"  style="width:100%; background-color: #fff; margin: 0px 0 0px 0;border: solid 1px #525252;border-collapse:collapse;font-size:11px;font-family:Verdana;text-align:left;font-weight:normal; color: #515251;" border="1">
    <tbody>
      <tr>
        <td>3</td>
        <td>PUSPENDRA KAILASH BHURIYA S/O </td>
        <td>A17 - NEW VEHICLE LOAN</td>
        <td>003016000005</td>
        <td>12000.00</td>
        <td>2500.00</td>
        <td>6300.00</td>
        <td>1.00</td>
        <td>3350.00</td>
        <td>2.00</td>
        <td>3.00</td>
        <td>4.00</td>
        <td>19000.00</td>
        <td><input type="button" id="btnApprove"  value="Approve" runat="server" style="height:24px; width:82px;" tabindex="5" onclick="Approve(); return false;"></td>
        <td><input type="button" id="btnReject"  value="Reject" runat="server" style="height:24px; width:82px;" tabindex="6" onclick="Reject(); return false;"></td>
      </tr>
      <tr>
        <td>4</td>
        <td>RAKESH MANGILAL VERMA S/O </td>
        <td>A17 - NEW VEHICLE LOAN</td>
        <td>003016000015</td>
        <td>13000.00</td>
        <td>3000.00</td>
        <td>5600.00</td>
        <td>1.00</td>
        <td>5600.00</td>
        <td>2.00</td>
        <td>3.00</td>
        <td>4.00</td>
        <td>20000.00</td>
        <td><input type="button" id="btnApprove"  value="Approve" runat="server" style="height:24px; width:82px;" tabindex="5" onclick="Approve(); return false;"></td>
        <td><input type="button" id="btnReject"  value="Reject" runat="server" style="height:24px; width:82px;" tabindex="6" onclick="Reject(); return false;"></td>
      </tr>
      <tr>
        <td>5</td>
        <td>MAGAN JUVANSHING CHOUHAN S/O </td>
        <td>A17 - NEW VEHICLE LOAN</td>
        <td>003016000023</td>
        <td>15000.00</td>
        <td>4500.00</td>
        <td>5600.00</td>
        <td>1.00</td>
        <td>8900.00</td>
        <td>2.00</td>
        <td>3.00</td>
        <td>4.00</td>
        <td>25000.00</td>
        <td><input type="button" id="btnApprove"  value="Approve" runat="server" style="height:24px; width:82px;" tabindex="5" onclick="Approve(); return false;"></td>
        <td><input type="button" id="btnReject"  value="Reject" runat="server" style="height:24px; width:82px;" tabindex="6" onclick="Reject(); return false;"></td>
      </tr>
    </tbody>
  </table>
</div>