We Keep Coding

Click a Cell by bootstrap table isn't working

I will write a method, that gives the Cell value from the clicked Bootstrap table. When I click at first the table heading, the th function was called. After that, I can't click on the cells. The tdOnClick() method is only working before I click to th. Why is that so?
my JS:
//if a cell was clicked, this function was called
function tdOnClick(){
var col = $(this)[0].textContent;
console.log(col);
}

You must add your tdOnClick() function after the function which creates your table body

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

How to detect select onChange in a row cell

I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!

I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});

$(document).on('change','td',function(){
//Do your abacadabra!
});

Change tabindex dynamically in jquery

Imagine this simple layout ( http://jsfiddle.net/4F9cL/ ).
We have a table, for each row i have a label a textbox and a checkbox.
The first textbox has tabindex = 1 , the first checkbox has tabindex = 2, the next textbox on the second row has tabindex = 3 and so on.
What i would like to do is change the tabindex on the checkbox on the same row for the textbox that im in if the content of the textbox has changed.
For example at the moment im checking the checkbox on the row that the thebox content has been changed, i do that with the following code:
$("input:text").change(function () {
$(this).parents('tr:first').find('input:checkbox').prop('checked', 'checked');
So the scenario is the following: If the content of the textbox hasnt changed, when i tab i want the focus to change to the checkbox on the same row. If the content of the textbox HAS changed, i would like the focus to be on the next textbox on the row below INSTEAD of the checkbox on the same row.
I hope i explained it good enough for you to understand what im trying to do.
I've tried using .removeprop() and .removeattr() but that doesnt work and when next tab hits it just goes to the bottom of the page.

$("input:text").change(...);
The change event of a textbox will only be executed once the textbox loses focus. This means that when you press Tab, that function has not yet run, and you'll end up with your old tabindex target.
$("input:text").keyup(...);
$("input:text").keydown(...);
These events will fire when you either press down on (keydown), or release (keyup) a button while the textbox is focused.
Something like this should do the trick:
$("input:text").keyup(function() {
var textBox = $(this);
var textBoxIsEmpty = textBox.val().length == 0; //I assume you use this to determine which element should be the next to get focused when pressing tab.
var currentTabIndex = parseInt( textBox.attr("tabindex") );
var nextTarget = GetNextTarget(textBoxIsEmpty); //not sure how you define this. This is the item you want to be your next target when you press tab.
var nextTabIndex = currentTabIndex + 1;
nextTarget.attr("tabindex", nextTabIndex);
});
Although I am not 100% sure if changing the tabindex dynamically works in every browser.

I have tried like that and it's working fine for me.
before applying this you should clear on this you have declare you tabindex in the input properly.
jQuery("input:text").keyup(function() {
currentTabIndex = parseInt(jQuery(this).attr("tabindex") );
nextTabIndex = currentTabIndex + 1;
jQuery('input[tabindex='+nextTabIndex+']').select();
});

row selection on row click but not on hyperlink click in one of the column in jquery datatable?

i have my customer dataTable which has five columns. one column contains hyperlink. One of the column is checkbox.
i want when user clicks on the row, that row should be selected(which means row color should change and checkbox
should be selected). i can do it with below code snippet
$("#customer").on('click', $.fn.getDataTablesClickHandler("#selectAll"));
//where customer is the html div associated with dataTable and call the same function which gets triggered
//on call of selectAll html element. Inside that function i toggle the class of row
It works great. But my problem is i dont want this to happen(i.e row seection) on click of link inside one of the column.
how i can do this?So basically how can i restrict firing getDataTablesClickHandler on click of certain link in a cell or
on click on cell?

Try this out, you want to check out which target is being clicked, and ignore it if it's an anchor tag.
$("#customer").on('click', function(event) {
if(event.target.tagName == 'A')
return;
$.fn.getDataTablesClickHandler("#selectAll").apply(this);
});

You could do something like this:
if customer is your table;
$("#customer").on('click', 'tr', function(){
if( !$(this).is('tr') )
return;
$.fn.getDataTablesClickHandler("#selectAll");
});