How to change data column in table html using jquery

Question

<table id="datatable">
    <tr>
        <th>no</th>
        <th>name</th>
        <th>address</th>
        <th>ket</th>
        <th>act</h>
    </tr>
    <tr>
        <td>1</td>
        <td>erik</td>
        <td>lampus</td>
        <td>Closed</td>
        <td><button id="get">get</button>
    </tr>
    <tr>
        <td>2</td>
        <td>lupin</td>
        <td>ggreek</td>
        <td>open</td>
        <td><button id="get">get</button>
    </tr>
</table>


  $('#datatable').on('click', '#get', function() {
    const row = $(this).closest('tr')[0];
    const ket = row.cells[1].innerHTML;

    $('#modal').modal('show');
    $('#inputmodal').val(ket);

    $('#buttonmodal').on('click', function() {
      const ket2 = $('#inputmodal').val();
      $('#modaladuan').modal('hide');
      row.cells[8].innerHTML = ket2;
    });
  });

I want to change column ket in data table using modal bootstrap, and when button save modal click, value in input modal to change the column, this code work but when second rows click and save, Previously stored data also changed. how to solved that problem, help me. thank you

Does this answer your question? [jQuery ID selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Don't Panic, Aug 03 '21 at 07:39

score 0 · Answer 1 · answered Aug 03 '21 at 11:53

The problem is that you're using the button with id get. You can only have 1 element for each ID on a page. So:

Change the id="get" to class based, like class="get".
Then add a data-content (content can be a name of your choice) attribute to the button which should be equal to some value for each row. Here you'll have the value which you'll pass to the modal. If you don't prefer to pass data-* attributes, you could traverse the DOM elements (as you've done in your example), but it's generally not that great an idea.
Change the click to act on .get, then you could access the current target's data-content value, and proceed as you were.

If this doesn't work, put up a reproducible example of your code on JSFiddle and we can debug!

Carsten Massmann · Answer 2 · 2021-08-03T20:27:29.643

I prepared a little simplified snippet, so we can play things through here. Instead of the modal I am using a prompt() to receive an input value from the user. And, as you are already using jQuery you might as well use it properly: I use the tds jQuery object to collect all TDs of the current row. I grab the text value of the second TD in the row (index=1) and use the prompt for getting the user input for putting it back into the fourth column (index=3). The 9th column (index=8) does not exist in your example.

$('#datatable').on('click', '.get', function() {
  const tds = $(this).closest('tr').find('td');
  tds.eq(3).text(prompt("Enter a new value for "+tds.eq(1).text()));
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="datatable">
<tr>
    <th>no</th>
    <th>name</th>
    <th>address</th>
    <th>ket</th>
    <th>act</h>
</tr>
<tr>
    <td>1</td>
    <td>erik</td>
    <td>lampus</td>
    <td>Closed</td>
    <td><button class="get">get</button>
</tr>
<tr>
    <td>2</td>
    <td>lupin</td>
    <td>ggreek</td>
    <td>open</td>
    <td><button class="get">get</button>
</tr>
</table>

How to change data column in table html using jquery

2 Answers2