We Keep Coding

How to change data column in table html using jquery

<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

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!

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>

Access td with class on row open

I have a footable
. When I click on the plus to expand a row
I want to access with jQuery the yellow elements:
If I inspect the element the DOM looks like that after the click:
<table class="footable-details table">
<tbody>
<tr><th>
DOB (hide)
</th><td style="display: table-cell;">
10/16/1977
</td></tr><tr><th>
Description
</th><td class="someText" style="display: table-cell;">
Some description
</td></tr>
</tbody>
</table>
What I would like to do, is to set colspan="2" for td.someText and hide the <th>Description</th>. But I can't access td.someText
I tried to access it with
$('.footable').on('expand.ft.row', function(e, ft, row){
$(row.$details).find('td.someText'));
});
but he does not find anything. In fact, alert($(row.$details).html()); only returns
<td colspan="4">
<table class="footable-details table">
<tbody>
</tbody>
</table>
</td>
Any idea how to access the td with class someText after click?
Here is a jsFiddle
Note: This is not a duplicate of Footable and capturing the expand row event. The linked question is about how to access a row in general. This question is if I select it with the method from the API the content is not loaded correctly. The question helped me to get here, but does not to solve the here presented issue.

expand.ft.row event fires before it appends the dom content.so if you try to read the row content, it's not there.
The correct event for your case is expanded.ft.row which fires after appending the content.
$('.footable').on('expanded.ft.row', function(e, ft, row) {
alert($(row.$details).html());
});
check this demo
https://jsfiddle.net/bfmaredn/
I found this event by analyzing the source code from GitHub repository https://github.com/fooplugins/FooTable/blob/V3/src/js/classes/FooTable.Row.js

Use "async function", try the following code:
$(function() {
$(".footable").footable();
$('.footable').on('expand.ft.row', async function(e, ft, row) {
alert($(await row.$details).html());
});
});
Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

ClickEvent (or query selector) does not work properly

I am trying to build small calculator using HTML/CSS and JS.
The thing is that when I am trying to select buttons of the calculator from HTML script and add EventListener to them, they are not working properly. Here is part of my HTML:
`<table class="table1">
<tr>
<td id="n-1">1</td>
<td id="n-2">2</td>
<td id="n-3">3</td>
</tr>
<tr>
<td id="n-4">4</td>
<td id="n-5">5</td>
<td id="n-6">6</td>
</tr>
<tr>
<td id="n-7">7</td>
<td id="n-8">8</td>
<td id="n-9">9</td>
</tr>
</table>`
And here is my event function:
document.querySelector(.table1 td).addEventListener('click',function(){
console.log('It works');
var z = this.value;
console.log(z);
});
The only time I am receiving the console output is when I click on first cell of table (1). I am not sure why when I click on the other cells (for example 3 or 7) this do not work.
Thanks!

querySelector() Only returns one element, in your case it returns the first td inside .table1
If you want to add the listener to all td's you must use querySelectorAll():
document.querySelectorAll('.table1 td').addEventListener('click',function(){
.... // The rest of your code
});
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Slidetoggle not working on group of rows

I am struggling with Jquery Slidetoggle , it is not working on tr and td tags, this is small eample I tried in Jsfiddle, in fact my original code has dynamically generated tr and td tags in a loop and I need to exapand and collapse the tr sections
I even tried in JSfiddle, please help me to find out if my javascript code to drilldown to class "section" is wrong.
https://jsfiddle.net/jsfiddleuser0601/dxgwreyw/1/
$('.show').click( function() {
alert ("show clicked");
var content= $(this).closest('tbody').next('.section');
// var content = $(this).closest('tbody').find('.section');
var title = content.is(':visible') ? "Show" : "Hide";
content.slideToggle('slow');
alert("slide toggle operated");
$(this).text(title);
});
<table >
<tbody>
<tr>
<td class="show">Show
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="section">
section 1
</td>
</tr>
<tr>
<td class="section">
section 1
</td>
</tr>
</tbody>
</table>

I am not sure what you are trying to achive right now. I feel the HTML syntax is not really full so there might be problems helping you out with the jQuery.
First of all, you haven't included jQuery library in your fiddle thats why nothing is working there.
$('.show').click(function() {
alert("click clicked");
$('.section').parent().each(function(){
$(this).slideToggle();
});
});
Please see https://jsfiddle.net/dxgwreyw/4/ fiddle for more understanding how it could possibly work.

Remove table row that contains a table

I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.

How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/