How to Add button to each row in a table and on click of particular row button only that button has to hide using html jQuery php

Question

This is my HTML table with all the buttons on click of one button show another button immediately in the same row this is my code but I don't know how I need to make this work

<table id="example" class="stripe row-border order-column" width="100%">
<thead>
<tr>
<th>Drawing</th>
<th style="display:none">Overview</th>
<th>Stage</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>BW101-01</td>
<td>1</td>
<td><button type="button" class="clarify">Clarify</button>
    <button type="button" class="allott">Allott</button>
    <p id="satge3">Started / Paused</p>
    <button type="button" class="correctit">correctit</button>
    <button type="button" class="send">send</button></td>
</tr>
<tr>
<td>BW102-02</td>
<td>2</td>
<td>  <button type="button" class="clarify">Clarify</button>
      <button type="button" class="allott">Allott</button>
      <p id="satge3">Started / Paused</p>
      <button type="button" class="correctit">correctit</button>
      <button type="button" class="send">send</button></td>
</tr>                 
</tbody>
</table>

on click of the one button in table show another button which row button is clicked

This is my JQuery

$(document).ready(function(e) {
        var table = $('#example').DataTable();
         **var Stage = 1; //i get this from database**
        alert(Stage);

        if (Stage == 1) {
          $(".allott").hide();
          $(".clarify").show();
          $(".satge3").hide();
          $(".correctit").hide();
          $(".send").hide();
        } else if (Stage == 2) {
          $(".allott").show();
          $(".clarify").hide();
          $(".satge3").hide();
          $(".correctit").hide();
          $(".send").hide();
        } 


          $('.clarify').on('click', function(e) {
          $(".allott").show();
          $(".clarify").hide();
          $(".satge3").hide();
          $(".correctit").hide();
          $(".send").hide();
        });


});

something like this I want to achieve JSFiddle

Where is the pause button in your code? Anyway once you add the second button you can use `$(this).hide(); $(this).parent().find('.pause').show()` — Andrea Olivato, Jul 19 '21 at 05:02
`id` must be unique on a page. You have multiple sets of buttons with the same `id`, eg 2x with `id="clarify"`, etc... — Don't Panic, Jul 20 '21 at 07:59
Use CSS classes instead of IDs, and then `$(this)` to identify which button was clicked, then traverse with eg `find()` to find other buttons by class in that row. Eg https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click — Don't Panic, Jul 20 '21 at 08:06
YES if i use class also am not able to change buttons accordingly one after another — thejashwini l, Jul 20 '21 at 08:34
Look at what? Your question shows duplicate ids, and the linked duplicate describes why that won't work and how to solve it. If you've tried something else, edit your question, show your new attempt, and describe what happens now. — Don't Panic, Jul 20 '21 at 10:23
In scrip how i can take all the row stage id and give condition i thing am doing mistake there — thejashwini l, Jul 20 '21 at 10:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235097/discussion-between-thejashwini-l-and-dont-panic). — thejashwini l, Jul 20 '21 at 11:29
I don't see any updated code other than switching to classes. Did you read through [the answers in the question I linked to](https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click)? Did you try anything suggested there? — Don't Panic, Jul 20 '21 at 13:09

score 0 · Answer 1 · answered Jul 19 '21 at 05:01

Here's an option. Re-use the same button and change the text, you can process different actions in the javascript based on it's state

$('.start').on('click', function(e) {
  let isPaused = $(this).text().toLowerCase() === "pause";
  if (isPaused) {
    $(this).text('Start');
  } else {
    $(this).text('Pause');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>Drawing</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Drawing1</td>
      <td><button class="start">Start</button></td>
    </tr>
    <tr>
      <td>Drawing2</td>
      <td><button class="start">Start</button></td>
    </tr>
  </tbody>
</table>

sorry but i want to achieve like above question @Kinglish – thejashwini l Jul 20 '21 at 05:17 — thejashwini l, Jul 20 '21 at 05:17

How to Add button to each row in a table and on click of particular row button only that button has to hide using html jQuery php

1 Answers1