Develop Reference

make each table value display in each textbox

I have this html table and 2 textboxes:
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<input type="text" name="txt" id="txt" >
<input type="text" name="txt" id="txt2" >
I want when reload the page, the values 1 and 2 must display in each textbox. How can I do it?
I have tried this js code but wrong and I want it auto display, not to click it:
var cells = document.querySelectorAll('#myTbl tbody ');
Array.from(cells).forEach(function (elem) {
elem.addEventListener('click', function () {
document.getElementById('txt').value = this.textContent;
})
})

var tbody = document.getElementsByTagName('tbody')[0]
var input1 = document.getElementById('txt')
var input2 = document.getElementById('txt2')
input1.value = tbody.getElementsByTagName('td')[0].textContent
input2.value = tbody.getElementsByTagName('td')[1].textContent

Change color of text in row by checkbox in same row in table

I am creating a very simple table having two columns 1.Text 2.Checkbox. i want that whenever i make the checkbox checked corresponding row's text color should be changed. i don't know how to do that.can anyone guide please?
i tried this way but didn't work. here's the code:
<?php
$var=1;
$cbid = "chechbox".$var;
echo"<table>
<tr>
<th>Text</th>
<th>Checkbox</th>
</tr>";
while($var<=3){
echo"
<tr>
<td>
<input type='text' id='$var' value='$var'>
</td>
<td>
<input type='checkbox' id='$cbid' onclick='fun()'>
</td>
</tr>
</table>
<script>
function fun(){
var a = document.getElementById($var);
var b = document.getElemeentById($cbid);
if(b.checked == true){
a.style.color='red';
}
}
</script>
";
$var++;
$cbid = 'chechbox'.$var;
}
?>
i am beginner. i am not even sure if i can make multiple script using while loop.

You can do so:
document.getElementById('check').onchange = function () {
let textVar = document.getElementById('tableText');
if (document.getElementById('check').checked) {
textVar.style.color = 'red';
} else {
textVar.style.color = 'green';
}
}
<table>
<tr>
<th>Text</th>
<th>Checkbox</th>
</tr>
<tr>
<td><input type='checkbox' id='check' value='$var'></td>
<td><input type='text' id='tableText' value='$var'></td>
</tr>
</table>

Get clicked column index from row click

I have a row click event. Recently had to add a checkbox to each row. How can I identify the clicked cell on row click event?
Or prevent row click when clicked on the checkbox.
Attempts: this.parentNode.cellIndex is undefined on the row click event.
function pop(row){
alert(row.cells[1].innerText);
}
<table style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr onclick="pop(this);">
<td><input type="checkbox" id="123456" /></td>
<td>Lonodn</td>
</tr>
</table>

Do you want something like this? You can just check the type attribute of the source element of the event and validate whether to allow it or not, you can stop the event using e.stopPropagation();return;.
function pop(e, row) {
console.log(e.srcElement.type);
if(e.srcElement.type === 'checkbox'){
e.stopPropagation();
return;
}else{
console.log(row);
alert(row.cells[1].innerText);
}
}
<table style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr onclick="pop(event, this);">
<td><input type="checkbox" id="123456" /></td>
<td>Lonodn</td>
</tr>
</table>

You should pass in the event details to your function and check the target property:
function pop(e){
// If the target is not a checkbox...
if(!e.target.matches("input[type='checkbox']")) {
alert(e.target.cellIndex);
}
}
<table style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr onclick="pop(event)">
<td><input type="checkbox" id="123456" /></td>
<td>Lonodn</td>
</tr>
</table>
Note: If you have nested elements inside the <td>, you might want to check e.target.closest("td") instead.
Note 2: You might need a polyfill for the matches method depending on which browsers you're supporting.

Here is an example if you don't want to attach a listener on every row :
document.getElementById("majorCities").addEventListener("click", function(e){
if(e.target.type === 'checkbox'){
var checked = e.target.checked;
var tr = e.target.parentElement.parentElement;
var city = tr.cells[1].innerHTML;
console.log(city+":checked="+checked);
}
});
<table id="majorCities" style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>London</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>Paris</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>New-York</td>
</tr>
</table>

window.pop = function(row){
console.log('here');
var parent = row.parentNode;
Array.from(row.parentNode.querySelectorAll('tr')).forEach(function(tr, index){
if (tr === row) {
alert(index)
}
})
}
https://jsfiddle.net/sz42oyvm/

Here is for the pleasure, another example with an object containing the cities' names and a method to draw the table with ids corresponding to the name of the clicked city, so getting the clicked name is easier.
(function () {
var mySpace = window || {};
mySpace.cities = {};
mySpace.cities.pointer = document.getElementById("majorCities");
mySpace.cities.names = ["Select","City"];
mySpace.cities.data = [{"name":"Paris"},{"name":"New Delhi"},{"name":"Washington"},{"name":"Bangkok"},{"name":"Sydney"}];
mySpace.cities.draw = function(){
this.pointer.innerHTML="";
var html = "";
html+="<tr>"
for(var i=0;i < this.names.length;i++){
html+="<th>"+this.names[i];
html+="</th>"
}
html+="</tr>"
for(var i=0;i < this.data.length;i++){
html+="<tr>"
html+="<td><input id='"+this.data[i].name+"' type='checkbox'/></td>"
html+="<td>"+this.data[i].name+"</td>"
html+="</tr>"
}
this.pointer.innerHTML=html;
}
mySpace.cities.draw();
mySpace.cities.pointer.addEventListener("click", function(e){
if(e.target.type === 'checkbox'){
var checked = e.target.checked;
var city = e.target.id;
console.log(city+":checked="+checked);
}
});
})();
table {width:25%;background:#ccc;border:1px solid black;text-align:left;}
td,tr {background:white;}
th:first-of-type{width:20%;}
<table id="majorCities">
</table>

Return an array of all checkboxes checked upon click

I've got a table with a checkbox in each row, like this:
<table id='users'>
<thead>
...
</thead>
<tbody>
<tr>
<td><input type='checkbox' name='users' id='someUserId'></td>
<td> some variable pid </td>
<td>...</td>
</tr>
<tr>
<td><input type='checkbox' name='users' id='someOtherId'></td>
<td> some other variable pid </td>
<td>...</td>
</tr>
...
</tbody>
</table>
Now i want to put the text of the columns next to the checkboxes, the pids, into an array, then pass the array to a function. The function should take each record in the array and process them.
My best try so far:
function myFunction(arr[]){...}
function getIds(obj){
var $table = $("#users");
alert($table.attr("id"));
var $cboxes = $table.find("input:checkbox").toArray();
alert($cboxes);
var checkedArray = [];
var pid;
for(i = 0;i < $cboxes.length; i++){
if($cboxes[i].checked){
pid = $cboxes.parent().siblings().eq(0).text();
checkedArray.push(pid);
alert(pid);
}
}
alert(checkedArray);
return checkedArray;
}
$("#button").click(function(){
var ids = getIds();
for(i = 0; i < ids.length; i++){
myFunction(ids[i]);
alert("Function executed for "+ids[i]+".");
}
});

You can slim this down heavily with the :checked pseudo-selector, and $.map.
function process (id) {
alert(id);
}
function find () {
return $('#users').find('input:checkbox:checked').map(function () {
return $(this).parent().next().text();
}).toArray();
}
function handle () {
find().forEach(process);
}
$('#btn').on('click', handle); // Pseudo-event
<table id='users'>
<thead>
</thead>
<tbody>
<tr>
<td><input type='checkbox' name='users' id='someUserId'></td>
<td> some variable pid </td>
<td>...</td>
</tr>
<tr>
<td><input type='checkbox' name='users' id='someOtherId'></td>
<td> some other variable pid </td>
<td>...</td>
</tr>
</tbody>
</table>
<button id="btn">Check!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If you don't want to loop twice, you should compress the logic into a single function chain. This cuts down on loops, but still builds the array for later use.
var myNamespace = {};
function process (id) {
alert('Single ID: '+ id);
return id;
}
function find () {
return $('#users').find('input:checkbox:checked').map(function () {
return process($(this).parent().next().text());
}).toArray();
}
function handle () {
myNamespace.ids = find();
alert('All IDs: ' + myNamespace.ids)
}
$('#btn').on('click', handle); // Pseudo-event
<table id='users'>
<thead>
</thead>
<tbody>
<tr>
<td><input type='checkbox' name='users' id='someUserId'></td>
<td> some variable pid </td>
<td>...</td>
</tr>
<tr>
<td><input type='checkbox' name='users' id='someOtherId'></td>
<td> some other variable pid </td>
<td>...</td>
</tr>
</tbody>
</table>
<button id="btn">Check!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Try this:
fiddle
function getIds() {
var chk = $("#users").find("input:checkbox");
var pId = [];
chk.each(function(){
pId.push($(this).parent().next().html());
});
return pId;
}
$(function(){
getIds().forEach(function(i){
console.log(i);
});
});
Find all checkboxes inside the users table, create array, push all pId's into the array then return it from the function. Then just loop through them all.

jQuery: Get last 'td' containing some text without using each

I have a table in below format,
<table>
<tr>
<td>Dynamic Text1</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Dynamic Text2</td>
</tr>
<tr>
<td>Dynamic Text3</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
I want to get the last td containing something other than just a . In the example markup shown this would be Dynamic Text3, but I will not know the specific text in advance. This is simply possible by running in a loop but, is there any way to do this without using each?

Update:
$('td').filter(function(){
return !!$.trim($(this).text());
}).last().css('color', 'red');
Demo: Fiddle

This should work now
var td = $('table td:last');
function findTD() {
if (!td.text().replace(/\u00a0/g, "").length) {
if (td.parent().is(':not(:first)')) {
td = td.parent().prev().find('td');
return findTD();
} else {
return 'No text found!';
}
} else {
return td.text();
}
}
alert(findTD());
FIDDLE

UPDATE This doesn't cover OP needs, mis understood OP's question
Use :contains selector :
http://jsfiddle.net/NkYZf/2
var search = "Dynamic Text3";
$('table td:contains("'+search +'"):last').css('color','red');

You can use :contains
var lastTd = $('td:contains("' + text + '"):last');

Here is a possible POJS solution
HTML
<table>
<tr>
<td>Dynamic Text1</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Dynamic Text2</td>
</tr>
<tr>
<td>Dynamic Text3</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Javascript
var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, function (node) {
if (node.tagName === "TD" && node.textContent.trim()) {
return NodeFilter.FILTER_ACCEPT;
}
return NodeFilter.FILTER_SKIP;
}, false);
while (treeWalker.nextNode()) {}
console.log(treeWalker.currentNode !== document.body ? treeWalker.currentNode : null);
On jsfiddle

$("td").filter(function() { return $.text([this]) == 'Dynamic Text3'; })
.addClass("red");