Develop Reference

change background-color on tablerow selection

I have a bunch of tables as partialViews which are loaded in using ajax.
now I want to write a global function that when someone clicks on a tablerow, the background-color turns orange, and when selecting a different tablerow the old one turns white again and the new one turns orange.
so I wrote this at the bottom of the _Layout.cshtml:
<script type="text/javascript">
$(document).ready(function() {
$("table tbody tr").on('click', function () {
var selected = $(this).hasClass("selectedTableRow");
$("table tbody tr").removeClass("selectedTableRow");
if (!selected)
$(this).addClass("selectedTableRow");
});
});
</script>
but it's not being reached at all, console.logs or alerts that I've placed in that function are not being fired. Why not?
btw my tables all have a standard setup
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

you are creating tables dynamically so bind click event using document with .on, see below
$(document).ready(function() {
$(document).on('click',"table tr", function () {
var selected = $(this).hasClass("selectedTableRow");
$("table tr").removeClass("selectedTableRow");
if (!selected)
$(this).addClass("selectedTableRow");
});
});

$(document).ready(function() {
$("body").on('click', "table tr", function () {
$("table tr").removeClass("selectedTableRow");
$(this).addClass("selectedTableRow");
});
});

How to add record to rth column of nth row table jquery?

I have a table having 6 columns of which 5 are poplated and the last column for all rows is empty.
Now I need to add some data in the last column of each row , how do I loop over the table using for loop and do the same?

You can use the rows collection of the table with a for of statement, then use the .cells collection on each row to get the last one.
for (const row of document.querySelector("#myTable").rows) {
row.cells[row.cells.length-1].textContent = "some dynamic data";
}
table td:last-child {
background: #DDD;
}
<table id=myTable>
<tbody>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
</tbody>
</table>
Or use querySelectorAll to select the last cell of each row directly.
for (const cell of document.querySelectorAll("#myTable td:last-child")) {
cell.textContent = "some dynamic data";
}
table td:last-child {
background: #DDD;
}
<table id=myTable>
<tbody>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
</tbody>
</table>
You could even add :empty to the selection to only select empty cells. document.querySelectorAll("#myTable td:last-child:empty")

Here you go with one more jQuery solution https://jsfiddle.net/5htkr87L/
$('#myTable tbody tr').each(function(){
$(this).find('td').last().html("Last");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
</tbody>
</table>
I've used jQuery .each method to loop through all the tr & looking of last td using jQuery last method.
Hope this will help you.

Attach jquery plugin function to dynamically created DOM elements

I am using a jQuery plugin to drag table columns to rearrange them as below
$("#myTable").dragtable();
It works fine for existing table and I can drag table columns. However I need to add rows dynamically in myTable but I can't drag dynamically added column.
I looked documentation for .live method but not sure how I would use it in my scenario.
any suggestion ?

You can do like this:
$('.defaultTable').dragtable('destroy').dragtable({});
Full example:
$('.defaultTable').dragtable();
$('#add-column').click(function(e){
var tbody = $('.defaultTable').find('tbody'),
thead = $('.defaultTable').find('thead');
tbody.find('tr').each(function(){
var tr = $(this);
tr.append('<td>Some column</td>');
});
thead.find('tr').each(function(){
var tr = $(this);
tr.append('<th>appended column header</th>');
});
$('.defaultTable').dragtable('destroy').dragtable({});
});
<link href="https://rawgit.com/akottr/dragtable/master/dragtable.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<span id="add-column">Add column</span>
<table class="defaultTable sar-table">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>
<tbody>
<tr>
<td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td>
</tr>
</tbody>
</table>

You can't use .live in this situation. You will have to just call .dragtable() for each new element that you add.

jQuery - change table cells position

how can I change via jquery the cells position from 1 2 to 2 1 ?
<table id='mytable'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

$('#mytable tr td:eq(0)').appendTo('#mytable tr');
The JSFIDDLE.

If you want to change all the second td to first position in your table, then you can use:
$.each($('#mytable tr td:eq(1)'), function() {
$(this).insertBefore($(this).prev());
})
Actually, above code will not work if your table have more than one <tr> element, if that is the case then you need to use .find():
$('#mytable tr').find('td:eq(1)').each(function() {
$(this).insertBefore($(this).prev());
});
Fiddle Demo
References: .each() , .find() , .insertBefore() , .prev()

with append
http://jsfiddle.net/F7HmQ/1/
$(function(){
var td = $("td").first() ;
$("tr").first().append(td);
});

Hide table rows except head

Without Jquery or any JavaScript library i need to hide the rows of a simple html table except for the table head on page load.

if your table is correctly marked up.
You can do something like :
document.getElementById('yourtable')
.getElementsByTagName('tbody')[0]
.style.display = 'none';
Then put this on an 'onload' event
You could also do it in CSS + Javascript by setting a global .js class to your tag and then use CSS selector.
html.js #yourtable tbody
{
display: none;
}

<style type="text/css">
.mytable tr {
display: none;
}
</style>
Just kidding. Here we go:
<table border="1" id="mytable">
<th>
<td>asd</td>
<td>asd</td>
</th>
<tr>
<td>asdkjas</td>
<td>asdasdjwa</td>
</tr>
<tr>
<td>asdkjas</td>
<td>asdasdjwa</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
hideTableRows();
}
function hideTableRows() {
var myTableRows = document.getElementById("mytable").getElementsByTagName("tr");
for(i=0;i< myTableRows.length;i++) {
myTableRows[i].style.display = "none";
}
}
</script>
I think a table requires rows, won't display with just headers.. I could suggest adding a blank row at the start of the table, and changing "i" in the for loop to 1. That way the first row should be skipped.
HTH
Marko

No particular need to resort to javascript, you can do the trick through CSS too:
#table_id tr
{
display:none;
}
This should hide all TRs not TH.