Develop Reference

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>

Function name is not defined at HTMLTableCellElement.onclick

I want to make X and O game , So the first function i did it has loop and condition that when i click on any cell(td) in the table and if all cells in the table are empty wrote X in the cell which I clicked it , but I have here 2 problem ,
First one The console wrote (Sample1.html:53 Uncaught SyntaxError: Unexpected token '<') it refers to for loop, so I don't know what is the problem there.
the second problem console wrote also that my function name is not define , although the function name is correct so can anyone help me.
the JS codes is
<script >
/*var lastGame;*/
var TR=0;
var table = document.getElementById('tb');
function CheckAllEmpty(idClicked){
for(var x=0, x < table.rows.length; x++){
if(!table.rows[x])
{
TR++;
}
else{}
}
if(TR==9)
{
document.getElementById(idClicked).innerHTML="X";
}
else {}
}
</script>
And the HTML :
<table id="tb">
<tr>
<td id="td1" onclick="CheckAllEmpty(this.id);"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td5"></td>
<td id="td6"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td8"></td>
<td id="td9"></td>
</tr>
</table>

There seems to be other problems with your code, but your two specific problems should be fixed. Also I don't see why you need to check if every cell is empty, but then again I can't see the rest of your code. Feel free to ask any questions in the comments.
var TR = 0;
var table = document.getElementById('tb');
function CheckAllEmpty(idClicked) {
for (var x = 0; x < table.rows.length; x++) {
if (!(table.rows[x].value == "")) {
TR++;
console.log(TR);
}
}
if (TR == 3) {
document.getElementById(idClicked).innerHTML = "X";
}
}
CheckAllEmpty('td1');
<table id="tb">
<tr>
<td id="td1" onclick="CheckAllEmpty(this.id)"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td5"></td>
<td id="td6"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td8"></td>
<td id="td9"></td>
</tr>
</table>

Showing and Hiding Table Rows Based Off Alphabet Buttons

I have a table with a lot of rows in it, and I want to give users the ability to click an 'A' button and all the results that start with 'A' are displayed. They could do the same for every letter. This is what I've come up with so far:
HTML
<input type="button" id="aSort" value="A" onclick="alphaSort(this.value);">
<table>
<thead>
<tr>
<td>Title</td>
<td>Description</td>
<td>Active</td>
</tr>
</thead>
<tbody>
<tr>
<td name="title">Apple</td>
<td>It's a fruit</td>
<td>Active</td>
</tr>
<tr>
<td name="title">Pear</td>
<td>It's also fruit</td>
<td>No</td>
</tr>
</tbody>
</table>
JS
function alphaSort(val) {
//pseudocode
var $rows = $('td[name=title]');
$rows.forEach(function(e) {
if(e.innerText == val + '%') {
e.closest('tr').show();
} else {
e.closest('tr').hide();
}
}
}
So with what I have here, the idea is if the user clicked the button only the Apple row would show. Ideally the function would be case insensitive. Could someone help me with how to properly iterate through all the table rows efficiently and compare the value stored in the title row?

you can use startsWith function : https://www.w3schools.com/jsref/jsref_startswith.asp
like this :
$("#aSort").click(function(){
var $rows = $('td[name=title]');
var val = $(this).val()
$rows.each(function() {
if($(this).text().startsWith(val)) {
$(this).closest('tr').show();
} else {
$(this).closest('tr').hide();
}
})
})
https://jsfiddle.net/xpvt214o/899140/

get detail value from database on <tr> hover

Hello guys i have a problem which i can't figure out for a little while. i have a loop which return value from database and i want each value to view their value on onmouseover property of JavaScript. but it only shows the first row value for all the tags. here is the php part of code
$result = "<table id='displayDiv' width='1000' class='table_info table-bordered table-striped table-hover'>
<tr>
<td colspan='6' class='plate'>Follow-Up Events</td>
</tr>
<tr style='text-align:center; color:#FFF; background: #31B0D5;'>
<td>Customer</td>
<td>Plate</td>
<td class='col-md-4'>Problem</td>
<td>Date Created</td>
<td></td>
</tr>";
foreach ($followArray as $customer) {
$result = $result .
"<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td id='plate' onmouseover='plate();' onmouseout='plateout();'>$customer->plate</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>";
}
$result = $result . "</table><div id'white'></div>";
and the javascript
function plate() {
document.getElementById("white").innerHTML = $("#plate").text();
}
function plateout() {
document.getElementById("white").innerHTML = "";
}
Thanks for the help.

As you are using native js, just pass this into your plate function and use this.innerHTML.
Also fix the html - ids should be unique so either change it to a class or append a unique number onto the end (in the example below I have changed it to a class) - you should never have an id in a loop (unless you are appending an index or something like that).
And there should be an = in the white div
function plate(columnCell) {
document.getElementById('white').innerHTML = columnCell.innerHTML;
}
function plateout() {
document.getElementById('white').innerHTML = '';
}
<table id='displayDiv' width='1000' class='table_info table-bordered table-striped table-hover'>
<tr>
<td colspan='6' class='plate'>Follow-Up Events</td>
</tr>
<tr style='text-align:center; color:#FFF; background: #31B0D5;'>
<td>Customer</td>
<td>Plate</td>
<td class='col-md-4'>Problem</td>
<td>Date Created</td>
<td></td>
</tr>
<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td class='plate' onmouseover='plate(this);' onmouseout='plateout(this);'>$customer->plate</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>
<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td class='plate' onmouseover='plate(this);' onmouseout='plateout();'>$customer->plate1</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>
<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td class='plate' onmouseover='plate(this);' onmouseout='plateout(this);'>$customer->plate2</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>
</table>
<div id="white"></div>
If you want a jQuery solution then using the new class of plate (and removing the onmouseover and onmouseout from the html) you can do something like this:
// run in your document ready
var white = $('#white');
$('.plate').hover(
function() {
// mouseover
white.text($(this).text());
}, function() {
// mouseoout
white.text('');
}
);

Get text's tags under this

I have this code
JavaScript:
var J = jQuery.noConflict();
J('#example tr').click( function() {
//HERE THE CODE I WANT
} );
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Immat</th>
<th>Marque</th>
<th>Modèle</th>
<th>Contrat</th>
<th>Début Contrat</th>
<th>Fin Contrat</th>
<th>CoûtHT/mois</th>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
In a loop i want to get the text ( text() method ) of each td tag under the tr tab that user had clicked.
How can i do this ?

Use .find and .eachh to solve your problem.
J('#example tr').click( function() {
J(this).find("td").each(function() {
alert(J(this).text()); // or whatever else you want to do with the text
});
});

J('#example tr').click( function() {
var text="";
J(this).children("td").each(function(){
text += J(this).text();
});
alert(text);
});
Also noticed in your code the <THEAD> tag is not closed. This code may not work, if you leave that open.