We Keep Coding

How to dynamically remove records from a table via Jquery

I have an html table that is dynamically created.
The following jQuery code captures the tr that the user has selected in that table, and populates another table called "selected_users" with specific data from the row that's been picked.
$('#available_users tbody').on('click', 'tr', function () {
var id = this.id;
var tr;
tr=$('<tr/>');
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
var tds = $(this).find('td');
tr.append("<td>" + tds.eq(1).text() + "</td>");
tr.append("<td>" + tds.eq(3).text() + "</td>");
$('#selected_users').append(tr);
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
Question
This logic is working. But now what I need to do is when users deselect a previously selected record from the available_users table, I need to remove it from the "selected_users" table.
What I've tried So far:
The first thing I tried to do is to assign an ID to the <TR> that I create in the "selected_users" table, so that I can use this id to find the row I want to delete.
I tried to change my code to look like this:
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
var tds = $(this).find('td');
tr.append("<td>" + tds.eq(1).text() + "</td>");
tr.append("<td>" + tds.eq(3).text() + "</td>");
tr.attr('id') = id.substring(4); //******* NEW ********
$('#selected_users').append(tr);
But it bombs with an error "ReferenceError: invalid assignment left-hand side".
The other question is how to remove the from the selected_users table. I'd like to put the logic in the else path ...
} else {
selected.splice( index, 1 );
//*** add logic to remove also from the selected_users table.
}
Thanks.
EDIT 1
All the code I've posted here works, except the attempt to dynamically assign the ID attribute to the new <TR> I'm adding. I think in this case, all the details might be making things more complicated ???
Maybe it would simplify things if I just asked how do so something like this:
var tr;
tr.append("<td>value1</td>");
$('#test_table').append(tr);
When doing something like the above, how would you assign an id of "id=123" to the <tr>?
Also, if you only had the row id (<tr id=123>), how could you delete the entire row from test_table?

First, I'm assuming that this is the line that "bombs with an error ReferenceError: invalid assignment left-hand side":
tr.attr('id') = id.substring(4);
I make this assumption because attr('id') will return a String, which is immutable, and you're trying to assign a new String (of id.substring(4)) to that existing string.
If you wish to set a new value to the id you need to use the setter form of the attr() method:
tr.attr('id', id.substring(4))`
Or, assuming the substring is to be taken from the current id:
tr.attr('id', function (index, currentProperyValue) {
return currentPropertyValue.substring(4);
});
In the above the argument-names are user-defined, the first argument (above: 'index') is the index of the current element returned by the collection in the tr variable; the second (above: 'currentPropertyValue') represents the current-value of the property we're changing with the method.
…if you only had the row id (<tr id=123>), how could you delete the entire row from test_table?
Simply, using jQuery:
$('#123').remove();
Which will remove the element from the document (wherever that element appears within the document, bearing in mind that duplicate ids are invalid, so if two elements occur with that same id only the first element with that id will be removed).
Alternatively, but still simply, using plain JavaScript; here we're using a variable because we need to get the same element twice:
var elem = document.getElementById('123');
elem.parentNode.removeChild(elem);
References:
JavaScript:
document.getElementById().
Node.parentNode.
Node.removeChild().
String.
String.prototype.substring().
jQuery:
attr().
remove().

DataTables table plugin for jquery: how to set a css class for tr and td

I am trying to set a css class to a row using the DataTables, query plugin for tables.
I managed to set the class on the tr tag when the initialization was complete with:
"fnInitComplete": function(oSettings) {
for (var i = 0, iLen = oSettings.aoData.length; i < iLen; i++) {
oSettings.aoData[i].nTr.className = "myClass";
}
},
I want to set a callback for each new row, and set to tr class a and to td class b
I know how to add a class, and i need to set a class!
"fnRowCallback": function(nRow, aaData, iDisplayIndex) {
console.log(aaData);
$('tr', nRow).addClass('a');
$('td:eq(0)', nRow).addClass('b');
$('td:eq(1)', nRow).addClass('b');
$('td:eq(2)', nRow).addClass('b');
$('td:eq(3)', nRow).addClass('b');
return nRow;
},
this is what troubles me:
$('tr', nRow).addClass('a');
I don't know how to set a class to a tr tag.

According to the docs (fnRowCallback) the nRow represents a TR element
so this should do:
$(nRow).addClass('a');
If you want to add class to certain row N# you can use this(just build a proper selector):
$("tr:eq(" + rowNumber+ ")").addClass('a');
the string should look like this "tr:eq(1)"

If my understanding is correct then your issue might be in this line:
$('tr', nRow).addClass('a');
Because it equates to writing:
$(nRow).find('tr').addClass('a');
And you shouldn't be able to find a TR inside another TR (unless of course you are working with nested tables but we won't get into that)
If this is the case then your fix would be:
$(nRow).addClass('a');
Good Luck!

How to get element inside a td using Row index and td index

I have a Row Index and TD index in a table and I want to select input element inside the cell in [Row Index,TD Index] . How I can do this?

Tables have accessor properties intended for direct access to individual cells, i.e.:
table.rows[rowIndex].cells[colIndex]
hence:
table.rows[rowIndex].cells[colIndex].getElementsByTagName('input')[0];
or:
$('input', table.rows[rowIndex].cells[colIndex])

This should work:
$('tr:eq(rowIndex) td:eq(tdIndex) input')
:eq selector for more information.

var rowIndex = X;
var cellIndex = Y;
$('#my-table tbody')
.children(':nth-child('+(rowIndex+1)+')')
.children(':nth-child('+(cellIndex+1)+')')
.find('input').val('Hello');
of course you can put em all a single selector
$('#my-table tbody tr:nth-child('+(rowIndex+1)+') td:nth-child('+(cellIndex+1)+')')
.find('input').val('Hello');

Select all cells in nth column with jQuery

How do I select all cells in nth column of a normal html table. Ive tried this but its not working:
$('table#foo tbody td:nth-child(3)').each(function (index) {
$(this).addClass('hover');
});
UPDATE:
Heres a jsfiddle of the unworking code: http://jsfiddle.net/Claudius/D5KMq/

There is no need to use each for this.
$('table#foo tbody td:nth-child(3)').addClass('hover');
Other than that, there's nothing wrong with your code. Problem must be somewhere else.

Your actual problem (not evident in the original question, but there in the fiddle) is that .index() returns a zero-based value, but :nth-child() requires a one-based value.

$('table#foo tbody td:nth-child(3)').addClass('hover');
Use this script (draw your attention that with :nth-child selector index of each child to match, starting with 1)
$(".legendvalue", ".stmatst_legends").hover(function() {
var index = $('.legendvalue').index($(this));
$('table#stmstat tbody td:nth-child(' + (index + 1) + ')').addClass('hover');
}, function() {
//remove hover
});

How do I insert a new TR into the MIDDLE of a HTML table using JQuery?

I know how to append a new row to a table using JQuery:
var newRow = $("<tr>..."</tr>");
$("#mytable tbody").append(newRow);
The question is how do I create a new row that precedes some existing row.

var newRow = $("<tr>...</tr>");
$("#idOfRowToInsertAfter").after(newRow);
The key is knowing the id of the row you want to insert the new row after, or at least coming up with some selector syntax that will get you that row.
jQuery docs on after()

where_you_want_it.before(newRow)
or
newRow.insertBefore(where_you_want_it)
-- MarkusQ

Rather than this:
$("#mytable tbody").append(newRow);
you are going to want to do something like this:
$("#id_of_existing_row").after(newRow);

With:
var newTr = $('<tr>[...]</tr>');
You can…
Insert it after (or before if you so choose) another row for which you know an ID (or whatever other property):
$('#<id of the tr you want to insert the new row after>').after(newTr)
Insert it after a particular row index (indices are 0-based, not 1-based):
$($('table#<id> tr')[<index>]).after(newTr)
…or as you mentioned, the absolute middle is possible:
var existingTrs = $('table#<id> tr')
$(existingTrs[parseInt(existingTrs.length / 2)]).after(newTr)

If for example u place an insert image into your table this will be something like this :
Your last cell in your table :
<td> <img class=\"insertRow\" src=\"/images/imgInsertRow.jpg\" /> </td>
Your jquery code :
$('table td img.insertRow').click(function(){
var newRow=$('<tr>........</tr>');
$(this).parent().parent().after(newRow);
});