We Keep Coding

Slickgrid: value entered in a cell disappears after moving out of cell

In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha

You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it

Change of one field in the html table, changes a specific element inside that table. Not in other tables

I know that the practice is that every element has a unique id. I am curious about this case: I have a table (let's call it table1) that has many functions connecting its cells in various ways (ex: editing one cell changes other cells accordingly). Now, I need to have another table (let's call it table2), that will have exact same functions between its cells.
I would like to avoid changing the ids in the table2, and then copy pasting the js functions for the table1 and apply them for the ids from the table2.
The easiest thing for me would be to just copy-paste this table1 (so the cells in the table1 and table2 will have same ids), and adapt the js functions to make sure that whenever a change in table1 happens - only table1 is affected, and not cells in table2, and vice versa.
Example:
$('body').on('keyup', "input[id^='sub_']", function() {
$("[id^='top_']").val(5);
}
Now, I suppose if I have an id that begins with "top_" in both tables that the change in table1 will also change the value of the field "top_" in table2.
How can I make sure to avoid this?
I was thinking to do something like this:
$(this).closest("input[id^='top_']");
But this is not working, the values are changed in both tables... Does anyone have a suggestion?

Try the following code snippet:
$(this).closest("table").find("input[id^='top_']");
This will make sure the changes are made only within the table where the event occurred.
EDIT
Here is a small example that you can modify for your needs if you don't want to provide your HTML: https://jsfiddle.net/fjh0v6m4/10/

Maybe try
$('#sameid')[0].dosomething()

Moving the rows up and down on clicking the rows using javascript

I have a container in which there are five rows with multiple columns. When you click on a row the entire row should move downwards so the first row should become the second row. I searched for this but what I found didn't work for me, could you point me to some articles or give me an idea to help me solve this.

Yes, you can do that with jquery using click event and then get the previous or next row element and manipulating their indexes, using the index method present in jquery
use the index method to get their position and then apply +1/-1 logic for changing the index

JQuery method does not work on cached children objects

In JQuery, we can cache almost any objects returned by a selector, and in my case, I cache the children (<tr>s) of a selected element (<tbody> in a table) in a variable called rows.
I then call JQuery methods on this rows, which manipulate individual rows. For example, if there are 5 rows in total and I want to swap the first and the last row:
rows.eq(4).after(row1);
rows.eq(0).before(row5);
However, this does not work. The first row gets to the bottom but the bottom row does not get to the top.
What does it work is to get a fresh copy of the children on each manipulation. For comparision, please see: http://jsfiddle.net/QNS5G/
What is causing problems for the cached approach here?

After you change the row order in the DOM, the order in the jQuery object does not change.
So t1_rows.eq(4).after(t1_row1); moves the first row to the bottom (row 1 goes after the fifth row in the jQuery object). Then t1_rows.eq(0).before(t1_row5); tries to place the last row before row 1. Since it's already there, you don't see any changes.
Perhaps you are thinking el.after(something) places el after something, but it's the other way around, it actually places something after el.

Let me translate your code into english.
First, take row 1 and insert it after row 5
Then, take row 5 and insert it before row 1
The second operation does nothing because row1 has moved to the bottom of the list. It's already right before row5.

var tbody = $(document.getElementById('t1_parent')),
first_row = tbody.find('tr:eq(0)'),
last_row = tbody.find('tr:eq(4)');
last_row.prependTo(tbody);
first_row.appendTo(tbody);
EDIT:
Never mind. Another solution was found.

Column reorder at runtinme

I am using the DataTables plugin for jQuery and I would like to reorder the columns after the data is loaded. I know I can reorder them upon creating the table.
What I would like to do is to draw the table, load the data from the server and then, based on the response from the server, to reorder the columns.
How can I achieve this?

It is possible to do so by using the DataTables plugin ColReorder. After enabling the plugin the columns can be moved with the fnColReorder(from, to) like this:
var table = jQuery("#table_id").dataTable(settings);
table.fnColReorder(4, 10);//move the 4th column on the 10th position
table.fnAdjustColumnSizing();//a good idea to make sure there will be no displaying issues
But there should be payed some attention when using the column indexes: these are the indexes from within the table's columns array. These means, that the index does not have to match the column's number in the table(some columns can be hidden, according to your specification).