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>

Html/JS: Link cell values of one column of one table from cells of another column of another table

I am new to coding and am trying to make a table using values from another table.
For example, the following table has a column for "Contact" (names)
<table>
<tr>
<th>Role</th>
<th>Contact</th>
<th>Email</th>
</tr>
<tr>
<td>Role1</td>
<td>Person1 </td>
<td>Person1#xyz.com</td>
</tr>
<tr>
<td>Role2</td>
<td>Person2</td>
<td>Person2#xyz.com</td>
</tr>
</table>
My second table (ttask) has a list of tasks and has a column for the "Contact" assigned to a task. I would like to link the value for the Contact cells in the following table with its corresponding Contact in the 1st table so that if I change the Contact's name in the 1st table, it will update in all the Table ttask cells involving that Contact's name. How can I make this happen?
<table id="ttask">
<tr>
<th>Weeks Prior</th>
<th>Role</th>
<th>Contact</th>
<th>Task</th>
</tr>
<tr>
<td>16</td>
<td>AH</td>
<td>Person1</td>
<td>
What currently needs to be done. The task and what's involved blah blah
</td>
</tr>
</table>
Thank you so much!

first take different id for both table td and try this
$(document).ready(function(){
VAR abc = $(document.getElementById("tdidoffirsttable").innerHTML);
document.getElementById("td id of second table").innerHTML = abc;
});

The question is somewhat unclear because you didn't mention if you are willing to use html only or not. If you are willing to consider javascript, then this can work:
<p id="demo1">person1</p>
<p id="demo2">person2</p>
<script>
function myFunction() {
var str = document.getElementById("demo2").innerHTML;
document.getElementById("demo1").innerHTML = str;
}
myFunction();
</script>
Of course this is per row, if you data contains multiple lines then should be adapted by doing a loop in order to simplify.

DataTables: TypeError: i is undefined

I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??

FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.

jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.

For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.

This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.

I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).

I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.

Connecting Table1 th width to Table2 td width

I have a table (table1) which contains only th tags and a table (table2) which contains only td tags. (I know this set up seems really wrong, but it's set up this way due to a few different issues with the application, so try not to worry about why it's set up this way).
Each TH in table1 acts as a sorting button corresponding the TD in table2.
The full width of each table is the same, however the width of the TH's and the TD's are different making them not line up correctly.
I need to find a way to link the width of each individual TH to the width of the TD below it. The difficult part is that the TH sorting buttons are dynamic and the user has the ability to add or remove TH's to their liking, so the widths need to be able to dynamically change. I can't figure out how to link the two together seamlessly. Any ideas?
IE:
<table id="table1">
<thead>
<th>Sorts 1</th>
<th>Sorts 2</th>
<th>Sorts 3</th>
<th>Sorts 4</th>
</thead>
</table>
<table id="table2">
<thead>
<td>Sort 1</td>
<td>Sort 2</td>
<td>Sort 3</td>
<td>Sort 4</td>
</thead>
</table>
I have created a basic Fiddle that shows what mean. The last few td's get squished into the Sorts7 column. I want the TH and the corresponding TD to always equal the same width, even if we add or remove columns.
Link to Fiddle
Thank you in advance.
Edit: The two tables do have to remain separate. It's unfortunate I know. :(

Well I don't like this answer, but it works so...
What you could do is use jQuery to get the widths of the bottom columns and apply it on the top columns - like this:
$('#top1').css({"width":$("#bottom1").width()});
$('#top2').css({"width":$("#bottom2").width()});
$('#top3').css({"width":$("#bottom3").width()});
$('#top4').css({"width":$("#bottom4").width()});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<thead>
<th id="top1">Sorts 1</th>
<th id="top2">Sorts 2</th>
<th id="top3">Sorts 3</th>
<th id="top4">Sorts 4</th>
</thead>
</table>
<br> <!-- To demonstrate that they are separate -->
<table id="table2">
<tr>
<td id="bottom1">Sort 1</td>
<td id="bottom2">Sort 2 With Longer Content</td>
<td id="bottom3">Sort 3</td>
<td id="bottom4">Sort 4</td>
</tr>
<tr>
<td id="bottom1">Sort 1</td>
<td id="bottom2">Sort 2</td>
<td id="bottom3">Sort 3 With Longer Content</td>
<td id="bottom4">Sort 4</td>
</tr>
</table>
I just hope you don't have a lot of columns!

You can use a same class for both th & td.

Will something like this work for you?
I've used jQuery because of simplicity:
$( "#table2 tr td" ).each(function( index ) {
$('#table1 th').eq(index).css('width',$(this).width()+'px');
});
Demo: https://jsfiddle.net/6u1dyL55/10/
So, idea is to get td widths, and attach it to corresponding TH's in first table (via indexes - because they are same).

Remove all but a specific row from a table

I want to remove all rows apart from the row with id 'row0' from a table:
<table class="mytable">
<tr id="row0" class="myrow">
<td>aaa</td>
</tr>
<tr class="myrow">
<td>bbb</td>
</tr>
<tr class="myrow">
<td>ccc</td>
</tr>
</table>
But the following JQuery code removes ALL rows:
$('.mytable').children().not('#row0').remove();
Could someone explain why this happens? I would think that the child with id 'row0' would be excluded, but obviously that's not the case.
I have found another way to do this but still curious why the above method doesn't work:
$('.mytable').find('tr:not(#row0)').remove();

Because the children of a table element are thead, tfoot or tbody elements. A tbody element is always created in the generated DOM, even if it is not explicitly written in the HTML code.
You can also do:
$('.mytable tr').not('#row0').remove();
or
$('#row0').siblings().remove();