We Keep Coding

How to pass clicked/selected row data from one table to another table that are placed side by side

I have two tables that are placed side by side and i would to append selected row on the first table to the second tab
i managed to get the data from a selected row and convert it to an array. I tried using the v-bind tag to bind the data values in the second table and its not working
I expect to click a row in a table and that row is added to another table that is just placed on the side of the other table

What I understood from you question is that you are looking for a jquery code that makes the rows from the two tables to move from one table to the other whenever the user clicks on a row in any of the tables.
for example if you click on a row in first table, it moves to the second table and if you click on a row in second table, it moves to the first table.
if it is so, then the jquery code could be:
// identify the two tables with IDs for easier access
var tbl1=$('#table_1_id'), tbl2=$('#table_2_id');
// use tbody selector to make sure that you don't bind this event to table heading rows
$('#table_1_id,#table_2_id').find('tbody tr').on('click', moveRow);
function moveRow() {
// find on which table this row is
var row = $(this);
var table_current = row.closest('table');
// If current table ID equals to first table ID then it means we are in first table
if (table_current.prop('id')==tbl1.prop('id')) {
// Then we move the row to second table
tbl2.find('tbody').append(row);
} else {
// The row was in second table so we move it to first table
tbl1.find('tbody').append(row);
}
return;
}

Get specific td data, use data in a link, replace td data with the link JavaScript

I have a table generated by open data tables it generates perfectly. I need to isolate the last four cells on each row, store those values in a variable, and then make a link using the text in each cell (url + “/“ + text variable + “>” text variable + “</a>”). This link will be unique to each cell and needs to overwrite current cell text in all of last 4 cells of each row in the table. It will eventually be called on an onload event but onclick event is fine for now (testing etc). This needs to be a JavaScript function or jQuery.
I have searched for a long time trying every possible way to do this and can come close but I can’t seal the deal. Any help would be greatly appreciated. The url for the table I’m working with is: http://mak-a-key.com/wp-content/themes/theme49645/tables/table-links.html

When you create the table, you can use the callback function createdCell and modify the cell's DOM.
cellData: gives you the actual data in the current cell
rowData: gives you the actual array of data in the current row
if you need the last 4 in one, just concatenate :
rowData.nameCell2 + rowData.nameCell3.... and use it in the URL part.
Example:
$('yourTable').DataTable({
columns: [
{data: 'dataCell1'},
{data: 'dataCell2',
createdCell: function(td, cellData, rowData, row, col){
// rowData contains all information for the actual row
// cellData contains information in your actual cell
$(td).html("");
}
}
]
});

Cannot add click to only one table row

When I execute the following to add a click function to the cell at the end of A particular row, jQuery adds the click function to all of the rows. What am I missing here please?
og_rownum happens to equal a number 3, not a string, and the nth-child(8) column does exist in the table.
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
Thanks in advance....

It seems like you want to add a listener to only one row on your table. If thats the case just add id="yourID" to the tag that you want to manipulate.
Then in jquery, select it with
$('#yourID').click(function(e){
//code here
});
If you don't know which row needs to be manipulated, and want to choose it programmatically, then try this.
$("#game_lister_table tr").click(function(e){
$(this)...//selects the row that was clicked
})

I used to to this code when choosing specific Cell/ Cells in HTML table Like You
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
But I found there is an easy way is to Create Dynamically Id for cell every time you create row or cell you have an Easy way to use JQuery Selector for any (row , cell ,....etc)
var table = document.getElementById("myTable");
var rowIndex =table.rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.id="whatEver";
cell1.innerHTML = "<input type="text" id="txt'+rowIndex+'" />";
then your action came Next
$('#ID').on('click',function(e){});

Since the closest answer was removed, I'll add this.
Use "#game_lister_table tr:eq("+og_rownum+") td:nth-child(8)" to select the element you described.

Making sure that an appended row is always the last row in a table that is made up of dynamically created rows. .detach()

I would like to append a row that should be the last row of the table. In my code it appears to work the first time a row is added dynamically. But It doesn't become the last row when other rows are added.
I always want the "subtot" row to be the last row but when I append other rows it doesn't change to be the last row. It stays where it is even though other rows are appended.
//make sure that subtot is only appended once
if($('.subtot').length < 1){
$('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>').insertAfter('table tbody>tr:last');
}
you have to scroll down the jsfiddle a bit to see the code.
Thank you

Every time you add new row to the table run following code.
$('table').find('.subtot').detach().appendTo('table');
replace 'table' with any selector that identify table element. What it does is it will remove subtot row from table and append it back to the table. By that you can always be sure that subtot is always the last row.

To insert a whole new row, but you have to remember the implicitly inserted <tbody element
So how about
$('.tableClass > tbody').append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>');
to keep it sticky at the bottom, after adding any other rows run
$('.tableClass').find('.subtot').detach();
$('.tableClass > tbody').append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>');

get value for each row on DB table

I have this Jquery code that is supposed to give me the result of a column if I click on it's row. I'm using Yii but the problem is mostly with the Jquery.
$(document).on('click', 'td.myLink a', function(){
$('input[name=\"ECCategory[ParentID]\"]').val($('#mainID').html());
$('.search-form form').submit();
});
This is what I have. What this does is gives me the result of the first row (mainID column) no matter which row I click on. What I want for example is to click on row 5 and get the mainID for row 5.

IDs are unique. So only one element can have the id mainID. You probably want to use $(this) within your click event to search from the selected element. For example:
$(function($){
$('td.myLink a').click(function(){
var tr = $(this).parent().parent(); // selected row
// get columns that you want from selected row using tr.find('...')
// ...
}
});