We Keep Coding

datatable cant programatically select row

I have a datatable with a working system to select rows, if you click anywhere in the row (not just the checkbox), it will select the row (greying it out) and check the box, it also tracks the number of selected rows in the bottom info text.
I'm trying to get the first column header 'select all' checkbox to correctly select all rows, this function detects when the select all button is pressed:
//select all
$('body').on('click', '#productGapsSelectAll', function () {
var allPages = myProductGapsTable.rows().nodes();
console.log("allPages.length = ", allPages.length, ", allPages = ", allPages)
myProductGapsTable.rows().every(function(rowIdx, tableLoop, rowLoop){
var node=this.node();
console.log(`${rowIdx} selected = ${$(node).hasClass('selected')}`);
$(node).toggleClass('selected');
//$(node).click()
//$(node).select();
});
}
When I use $(node).toggleClass('selected') it only greys out the box, and doesnt check the checkbox,
$(node).click() and $(node).select(); dont check the box or grey the row. Is there some way using $(this) that I can replicate the action of clicking on the row to select it?
EDIT
I can access the checkbox via Node, although no defining ID
edit2; tried getting checkbox value from node but there is no 'checked' string inside the input element

Is it possible to bind kendo grid dataItem on cell level

I am using kendo grid. i need to bind data over cell, not on tr level.
By default dataItem is assigned on tr level. Is there any possibility to bind dataItem over Individual td
if i do grid.dataItem(grid.select(), i dont get dataItem for the selected cell, i need to find the closest tr and get dataItem, that is not what i need.
i.e., if i do select on a cell, selectable:'cell', i have to get dataItem by
grid.dataItem(grid.select())

The approach which you are using is working only if selection mode is not set to cell. In your case, you need to do one step in addition - select row.
change: function(e){
var grid = $("#cellSelection").data('kendoGrid');
var row = this.select().closest("tr");
var selected = grid.dataItem(row);
console.log(selected);
},
Dojo example

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.

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")

There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.

Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

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('...')
// ...
}
});