We Keep Coding

Making a counter using JavaScript/JQuery clone method in an HTML table

I need to make a counter using JavaScript/JQuery with clone method in the second column like for example the first row 1 and when I click on add button it automatically display number 2. I am using clone method in JavaScript/JQuery and I don't know how to add this. This is my full code:
var cloned = $('#myTable tr:last').clone();
$(".add-row").click(function(e) {
e.preventDefault();
cloned.clone().appendTo('#myTable');
});
$('#myTable').on('click', ".delete-row", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
<thead>
<th></th>
<th>#</th>
<th>test1</th>
<th>test2</th>
<th>test3</th>
<th>test4</th>
<th>test5</th>
</thead>
<tbody>
<tr>
<td>
delete
</td>
<td>
<!-- Counter here -->
</td>
</tr>
</tbody>
</table>
add

Consider the following.
$(function() {
function cloneLastRow(table) {
var row = $("tr:last", table);
var clone = row.clone();
$("td:eq(1)", clone).html($("tbody tr", table).length + 1);
clone.appendTo($("tbody", table));
}
function renumberTable(table) {
var count = 1;
$("tbody tr", table).each(function(i, row) {
$("td:eq(1)", row).html(count++);
});
}
$(".add-row").click(function() {
cloneLastRow($("#myTable"));
});
$("#myTable tbody").on("click", ".delete-row", function() {
var row = $(this).closest("tr");
if (confirm("Are you sure you want to delete the Row?")) {
row.fadeOut("slow", function() {
row.remove();
renumberTable($("#myTable"));
});
}
})
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
<thead>
<th> </th>
<th>#</th>
<th>test1</th>
<th>test2</th>
<th>test3</th>
<th>test4</th>
<th>test5</th>
</thead>
<tbody>
<tr>
<td>
delete
</td>
<td>
1
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
add
There is no need for a Counter when you can just request the current length of a selector. For example, you can get the length of all the Rows in the Table Body. Initially, that is 1. The next one would be 2.
Now if the table has a unique start, lets say 20, then you would want to get that String value, cast it as an Integer, and increment that value.
$("td:eq(1)", clone).html(parseInt($("td:eq(1)", row).text()) + 1);
This would result in 21.
Update
Based on your comment, when you delete a row, you want the numbers to remain continuous. This means you need to redraw all or at least all further numbers.
function renumberTable(table){
var count = 1;
$("tbody tr", table).each(function(i, row){
$("td:eq(1)", row).html(count++);
});
}
You would then run this function directly after a Row was removed.

how to select id excluding certain button or class?

I have a table like this:
The first row is thead and the second row is tbody that has id="chosen".
I made a function to remove the closest tr when the X button is clicked.
And then I'm making function to do something else when I click the whole row except for the button. (Now, function alerts message for the check)
But the problem is, if I click the X button, an alert message appears.
So, I want to exclude the X button area when calling that second function.
I tried .not() but it didn't work. :(
Html code for that table:
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>퀘스트 이름</th>
<th>난이도</th>
<th>목표</th>
<th>추천맵</th>
<th>반납</th>
<th width="50px">삭제</th>
</tr>
</thead>
<tbody id="chosen">
</tbody>
</table>
And my script here:
<script>
$(document).ready(function($) {
$(".clickable-row").click(function() {
var cloned = $(this).clone();
cloned.append('<td align="center";><button type="button" class="delete">X</button></td>');
$(cloned).appendTo($("#chosen"));
});
$("#reset").on("click", function() {
$("#chosen").empty();
});-
$("#chosen").on("click", ".delete", function() {
$(this).closest("tr").remove();
});
$("#chosen").not(".delete").on("click", function() {
alert("Just for check")
});
});
</script>
That first function makes a row that includes the delete button and then attaches to "choose" tbody.

You can use td:not(:last-child) to exclude last td from tr where delete button is located.
Demo Code :
//not last td
$("#chosen").on("click", "tr td:not(:last-child)", function() {
alert("Just for check")
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>퀘스트 이름</th>
<th>난이도</th>
<th>목표</th>
<th>추천맵</th>
<th>반납</th>
<th width="50px">삭제</th>
</tr>
</thead>
<tbody id="chosen">
<tr>
<td>name2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
<td><button type="button" class="delete">X</button></td>
</tr>
<tr>
<td>nam2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
<td><button type="button" class="delete">X</button></td>
</tr>
</tbody>
</table>

How to activate click option on a table-responsive column in innerHTML

I have a page where I set the dataTable content in the div using the following code:
$('#' + divid + '-data')[0].innerHTML = data.TableContent;
I get the table content from a different method. Here is my TableContent:
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td>Hi</td>
</tr>
</table>
On the page, when I tried to display an alert message on click on table-responsive column, nothing happens.
$("td.details-control").on("click", function(e) {
alert("hi");
});
I also tried:
document.getElementById("#table-51").on("click", "tr td.details-control", function () {
alert("hi");
});
Please help and thanks in advance.

Try this :
$("td.details-control").click(function(){
alert("Hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">Show alert</td>
<td>Hi</td>
</tr>
</table>

try this
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td onclick="alert('hi')">Hi</td>
</tr>
</table>

You seem to overcomplicate this issue; keep it simple! You miss something to click on (empty <td>) and the use of a native DOM method along with a jQuery delegated event handler will never work.
var data = { TableContent: `<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">click me</td>
<td>Hi</td>
</tr>
</table>`
}
$('#sample')[0].innerHTML = data.TableContent;
$('#sample').on('click', 'td.details-control', function(e) {
alert("hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>

How can i get the value of the contenent of a TD in a TR in a table? [duplicate]

This question already has answers here:
Is it possible to get the value of a <td> element using onclick?
(6 answers)
Closed 6 years ago.
I want to get the value of the td I click
I have a table ,in this table I have many tr and td
I want to get the value of the td I selected
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a id="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td id="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#lienFicheDemande').click(function (e) {
alert($('#iddem')[0].innerHTML);
window.open("Appli/Home/FicheDemande?iddem=" + $('#iddem').value, "nom_popup", " menubar=no");
});
});
</script>
i want to pass the value of dem_dpr into the link in javascript

First of all, you cannot use IDs this way. They need to be unique per document. Use class instead of IDs. Then, you can use .closest('.iddem') to grab the element closest to the link you clicked and use .html() or .text() to grab it's value.
Example:
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a class="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td class="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('.lienFicheDemande').click(function (e) {
alert($(this).closest('.iddem').html());
window.open("Appli/Home/FicheDemande?iddem=" + $(this).closest('.iddem').html(), "nom_popup", " menubar=no");
});
});
</script>

$(document).ready(function () {
$('td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
For every TD, bind click function in each of them.
.text() function will get only the text in TD out from it.
It is best if you could put ID for the table.
So if you have added ID to the table. The solution would be like this:
$(document).ready(function () {
$('#table_id td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});

tablesorter problems with 2 table in a page

I try to put 2 tables in a same page using jquery plugin tablesorter ..
But if do it, my second table does not work correctly..
In my second table, i have not the header name of my second table,
You can see it here :http://jsfiddle.net/9hHx5/
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.scroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.tablesorter').tablesorter({
scrollHeight: 150,
widgets: ['zebra','scroller']
});
//Setup window.resizeEnd event
$(window).bind('resize', window_resize);
$(window).bind('resizeEnd', function (e) {
/*
IE calls resize when you modify content, so we have to unbind the resize event
so we don't end up with an infinite loop. we can rebind after we're done.
*/
$(window).unbind('resize', window_resize);
$('table.tablesorter').each(function(n, t) {
if (typeof t.resizeWidth === 'function') t.resizeWidth();
});
$(window).bind('resize', window_resize);
});
});
function window_resize() {
if (this.resize_timer) clearTimeout(this.resize_timer);
this.resize_timer = setTimeout(function () {
$(this).trigger('resizeEnd');
}
, 250
);
}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="inner-header">Demo</div>
<table id="table1" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th class="yr">Year</th>
<th>Artist</th>
<th>Single</th>
<th>Album</th></tr>
</thead>
<tbody>
<tr><td class="yr">1979</td><td>Specials</td><td>Gangsters</td><td>Non-album single</td></tr>
<tr><td class="yr">1979</td><td>Specials</td><td>A Message to You, Rudy</td><td>Specials </td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Too Much Too Young</td><td>Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Rat Race</td><td>Non-album single</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Stereotype</td><td>More Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Do Nothing</td><td>More Specials</td></tr>
</tbody>
</table>
<table id="table2" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th>People</th><th>Age</th><th>Birthday</th>
</thead>
<tbody>
<tr>
<td class="yr">XYZ</td><td>12</td><td>12/15/2012</td></tr>
<tr>
<td class="yr">RZE</td><td>36</td><td>12/12/1985</td></tr>
<tr>
<td class="yr">HFF</td> <td>36</td><td>01/02/1985</td>
</tr>
</tbody>
</table>
</body>
</html>
Please if someone can help me

The problem appears to be a bug in the scroller widget code:
Change this line:
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', table[0]).html() + '<thead></table>');
to this (it's just this part $('thead', $tbl).html() that changed)
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', $tbl).html() + '<thead></table>');
and it fixes the problem.
I've included that correction in this updated demo.
I would also like to suggest you try out my fork of tablesorter which includes lots of improvements, as well as this updated scroller widget (which still has some problems that needs fixing).