We Keep Coding

How to get the id of a clicked element within a table row?

I have the following table
<table width="97%" border="1" class="queueList">
<thead>
<tr>
<th>Delete</th>
<th>Queue Name</th>
<th>Current queue length</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.ImportQueues)
{
<tr id="watchRow">
<td id="DeleteButton">X</td>
<td id="QueueName", value="#item.QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
}
</tbody>
how can I get the value of the element "QueueName" when "#DeleteRow" is clicked, using JQuery ?
So far I have
$("body").on("click", "#DeleteButton", function (event) {
var queueName = $(event.target).closest("div.queueList").find("#QueueName");
alert(queueName);
}

Use the data attribute to store the desired value on the button itself
<tr class="watchRow">
<td class="DeleteButton" data-queuename="#item.QueueName">X</td>
<td class="QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
then on click of TD (by the way, it should be a button)
$("body").on("click", ".DeleteButton", function() {
var queueName = $(this).data("queuename");
alert(queueName);
}
If you want to use this name on other buttuns also, like edit etc. then it is better to assign it to the whole row:
<tr class="watchRow" data-queuename="#item.QueueName">
<td class="DeleteButton">X</td>
<td class="QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
and read it like this:
$("body").on("click", ".DeleteButton", function() {
var queueName = $(this).closest('tr').data("queuename");
alert(queueName);
}

Without JQuery
<tr id="watchRow">
<td class="DeleteButton" onclick="deleteItem(#item.QueueName)">X</td>
<td value="#item.QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
<script>
function deleteItem(item) {
alert(item)
}
</script>
With JQuery
<tr id="watchRow">
<td class="DeleteButton">X</td>
<td value="#item.QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
<script>
$(".DeleteButton").on("click", function() {
alert($(this).next("td").html());
}
</script>
</script>

Show div with information for the current table row hover

I have a table with many rows, each row has each own id. I want when i hover the row, i can get it's ID (i will process php to get the data), and append to the div (div will fade out after hover).
<table id="listtemp" class="table datatable">
<thead>
<tr>
<th>Số PO</th>
<th>Số hợp đồng</th>
<th>Số hóa đơn</th>
<th>Doanh nghiệp</th>
<th>Người mua</th>
<th>Sales</th>
<th>Ngày tạo</th>
<th>Tình trạng</th>
<th>Chi tiết</th>
</tr>
</thead>
<tbody>
<?php
for($i = 0; $i < 10; $i++){
?>
<tr id="<?=$i;?>">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php } ?>
</tbody>
</table>

Using JQuery bind table tr hover and just get id from that.
$('#waypointsTable tr').hover(function() {
console.log($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="waypointsTable" border="1">
<tbody>
<tr id="1">
<td>some text</td>
</tr>
<tr id="2">
<td>some text</td>
</tr>
<tr id="3">
<td>some text</td>
</tr>
</tbody>
</table>

Here you go with an example of getting Id on hover https://jsfiddle.net/r6tbv9uz/
$('table tbody tr').hover(function(){
console.log($(this).attr('id'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="1">
<td>test</td>
</tr>
<tr id="2">
<td>test</td>
</tr>
<tr id="3">
<td>test</td>
</tr>
<tr id="4">
<td>test</td>
</tr>
</tbody>
</table>

best way is to write a hover function
$('#table tr').on('hover',function(){
var id = $(this).attr('id');
})

It will be better if you use mouseenter event rather than hover because hover event will be triggered when you will take your pointer on the row and when you will leave it.
So it will initiate your php request two times when you enter your pointer on a row and when you leave. And so, probably it will leave the info DIV there on the row and it will not fadeout.
Instead use mouseenter like this:
$('table tbody tr').on('mouseenter',function(){
var id = $(this).attr('id');
});

In the beiginning add class hidden to tbody.
<script>
$("#listtemp tr").hover(function (){
id = $(this).attr('id');
$.ajax({
type: 'POST',
dataType: 'json',
url: 'name of php file to get data',
data: { id: id }, //sending id to php file
success: function(response) {
$('tbody').removeClass('hidden');
$('tbody').fadeOut();
}
});
});
})
</script>

Get element node count with jquery

I don't know if I can explain this right...
I have a table like this:
<table>
<tr>
<td class="myTD">aaa</td>
<td class="myTD">bbb</td>
<td class="myTD">ccc</td>
<td class="myTD">ddd</td>
<td class="myTD">eee</td>
</tr>
</table>
Some jquery like this:
$('.myTD').on('click', function(e){
//... do some here ...//
});
when I click on a TD I want the node count of the clicked td.
E.g. if I click on ccc I want to alert 3
Is this possible in some way or do I have to explizit add an ID ?

$('.myTD').on('click', function(){
alert( $(this).index() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="myTD">aaa</td>
<td class="myTD">bbb</td>
<td class="myTD">ccc</td>
<td class="myTD">ddd</td>
<td class="myTD">eee</td>
</tr>
</table>

Swap table rows using javascript

Am trying to do like this,
<table>
<tr id="ID1"><td></td></tr>
<tr id="ID2"><td></td></tr>
</table>
I need to swap table rows index position like as follows
<table>
<tr id="ID2"><td></td></tr>
<tr id="ID1"><td></td></tr>
</table>
I tried to fix it using jQuery as:
$('#ID1').after('#ID2');
Can anyone help me to fix the above requirement using javascript?
$('#ID1').after('#ID2');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="ID1">
<td></td>
</tr>
<tr id="ID2">
<td></td>
</tr>
</table>

after() is used to insert content. To move or add elements, use insertAfter():
$('#ID1').insertAfter('#ID2');
Example fiddle

Swap row by appendChild.
var x = document.getElementById("first");
var table = document.getElementById("table");
table.appendChild(x);
<table id="table">
<tr id="first"><td>First</td></tr>
<tr id="second"><td>Second</td></tr>
</table>

jQuery load template inside a loop

I have a json file with some data and I am using a Js loop to load a jQuery template to iterate through and load a table made of 4 rows based on the data, so far I only get the last row. https://github.com/codepb/jquery-template
<script type="text/html" id="tableContent">
<tr>
<th>Key</th>
<th>Product</th>
<th>Bookings</th>
<th>%</th>
<th>Transactions</th>
</tr>
<tr>
<td data-content="">sth</td>
<td data-content="Product"></td>
<td data-content="Bookings"></td>
<td data-content="Percentage"></td>
<td data-content="Transactions"></td>
</tr>
</script>
function builTable(){
var table = "",
colors = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'];
for(i = 0; i< source.Products.length; i++){
$("table").loadTemplate($("#tableContent"),
{
Product: source.Products[i].Product,
Bookings: source.Products[i].Bookings,
Percentage: source.Products[i].Percentage,
Transaction: source.Products[i].Transaction
} );
$(document).ready(function(){
builTable();
});
<table border="1" cellpadding="2">
</table>
Is there something wrong inside the loop?
http://jsfiddle.net/9JV7t/1/

I think you just need to add an array because it loads the whole content just once and then overrides it again. But therefore you need to only include the data rows in the template and add the headings to the table (DEMO):
<script type="text/html" id="tableContent">
<tr>
<td data-content="">sth</td>
<td data-content="Product"></td>
<td data-content="Bookings"></td>
<td data-content="Percentage"></td>
<td data-content="Transactions"></td>
</tr>
</script>
Your table:
<table>
<thead>
<tr>
<th>Key</th>
<th>Product</th>
<th>Bookings</th>
<th>%</th>
<th>Transactions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And the js:
function builTable(){
$("tbody").loadTemplate($("#tableContent"), source.Products);
}