Develop Reference

Delete previous cells form a particular row and create new cells in java script

Here is the scenario:
User clicks on a button and can add new row in table.
Select a value from any of the row and few fields will be added in only that row. It works fine.
But problem is here: When user again selects any different rows it append the cells in rows, but I want to delete the previous cells and add new selected cells. I am not able to do that.
I tried with deleteCell() but did not find required solution. here is the whole code. If any one could help please.
Another problem with code is when I run it the first time it does not count first row number.
for (i = 0; i < selectedvalue; i++) {
var x = Row.insertCell(-1);
x.innerHTML = "<td><select><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option></select></td> </tr>";
}

Try this:
http://codepen.io/anon/pen/yeZrov?editors=1010
jQuery('#myTable tr').eq(rownum).find("td:gt(3)").remove();

DataTables 1.9.4 get live row data

I have a legacy DataTable that has a range of hidden columns that the user can show, then edit the cell via editable, then hide again.
each cell has a hidden text input which editable populates when the value changes. I have foudn that in datatables 1.9.4 i can
var r = oTable.$('tr');
//loop through datatables rows
for (var i = 0; i < r.length; i++) {
//get current rows data
var c = r[i];
if (i === 0) {
//convert to jQuery object
jc = jQ(c);
var changed = jc.find('.rowChanged').val();
}
}
which gets me the current live data but only for columns that are showing.
I tried oTable.fnGetData(c) passing the current row but this give me the initial starting html for each cell and not the live html (some inputs may have changed)
is there a way to return a jQuery object similar to the oTable.$() api call that contains the entire rows live data and not just the visible rows?

i solved this by showing all columns, grabbing the data using the oTable.$('tr') and then hide the relevant columns again.

Figure Out Which Merged Table Cells Would Have Been Clicked?

Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?

You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});

I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.

How to focus on row in HTML Table?

Is it possible to focus on a specific HTML table row/cell with the help of Javascript? For instance, if this row is after the browser fold then the browser would scroll down to the row upon focus.
I have some JS code that searches an HTML table for a user's string input. I would then like for this code to focus on this word if it is found (Safari/Chrome browsers).
var targetTable = document.getElementById("accountTable");
for (var rowIndex = 1 + searchStart; rowIndex < targetTable.rows.length; rowIndex++)
{
var rowData = '';
rowData = targetTable.rows.item(rowIndex).cells.item(0).textContent;
if (rowData.indexOf(str) != -1)
{
//focus on the row?
}
}

You could give each row a HTML ID (either dynamically or statically depending on your needs) which matches the content and then use URI fragments to focus on it. You could basically use your current code and use
location.hash = rowData;
If the content matches the user input. This would of course be cumbersome if you've got whole sentences in the row you want to focus on, but for a simple table, it would work.

I was able to achieve this by using scrollIntoView().

performing jQuery show/hide on dynamically created content

I have a page I created with jQuery, and in this page is a table where the table rows have classnames that identify them as a certain color (i.e. tr class="yellowclass").
The user is able to filter rows by clicking a checkbox that will show/hide tables of a certain color.
My problem is that the table is generated on the fly via getJSON requests. to add the new content to the table, I first do a children().remove() on the table's tbody, ($('#my_table_tbody').children().remove()), and then I use appendTo to add the new table information back in.
an example of this function is:
$('#my_table_tbody').children().remove();
$.getJSON("http://my_url.com/my_cgi_bin/my_cgi", {data: mydata}, function(j) {
var mylength = j.length;
for (var k = mylength - 1; k >= 0; k--)
$('<tr class="' + j[k].color + '"><td class="my_first_col_class">' + j[k].data1 + '</td><td class="my_second_col_class">' + j[k].data2 + '</td></tr>').appendTo($('#my_table_tbody'));
});
Now at the end of this function, I am trying to check to see if checkboxes are checked, and if so, to show/hide the new information. For example, to basically call
if (('#my_yellow_color_cb').attr('checked'))
$('.yellowclass').show();
else
$('.yellowclass').hide();
The problem is, the page isn't wanting to "remember" what has been checked. In other words, if the 'yellowclass' check box is unchecked, and the page reloads with new table data, the yellowclass class is still showing up, when it really should be hidden.
i suspect this has something to do with the DOM, and creating proper DOM elements that can be shown/hidden. But i don't know how to do this in my particular situation. I am a systems programmer, and am just doing this to program a tool that would provide our testers with some status info. i am no expert when it comes to JavaScript and have little understanding of the DOM, and can't seem to figure this one out.
How can I insert into the page so that I can properly show and hide this information?
If I update the page with new table data, and then check and uncheck boxes, then things work fine. But if I load table data, and just check the status of the boxes as they are, it's not wanting to work. Does jQuery take a little time to get DOM objects created before they can be accessed?
Thanks for any help.

Perhaps something like this?
$('#my_table_tbody').children().remove();
$.getJSON("http://my_url.com/my_cgi_bin/my_cgi", {data: mydata}, function(j) {
var mylength = j.length;
for (var k = mylength - 1; k >= 0; k--) {
var $row = $('<tr class="' + j[k].color + '"><td class="my_first_col_class">' + j[k].data1 + '</td><td class="my_second_col_class">' + j[k].data2 + '</td></tr>');
if ($('#my_yellow_color_cb:checked').length == 0 && $row.is('.yellow'))
$row.hide();
$row.appendTo('#my_table_tbody');
}
});
Basically, each row is created as a DOM fragment and then the conditional is run. If $('#my_yellow_color_cb:checked').length is 0, meaning the yellow color check box is not checked, then .hide() is executed for the row. Then, the row is added to the end of the tbody. You'll want to extend the if statement with more logic for your other colors.