I am using below code to generate a dynamic table-
<!DOCTYPE html>
<html>
<head>
<script>
document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row = 1; row < 5; row++) {
document.write("<tr>");
for (col = 1; col <= 4; col++) {
if(col == 1) {
document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
}
if(col == 2) {
document.write("<td width='140'>Name</td>");
}
if(col == 3) {
document.write("<td width='200'>Location</td>");
}
if(col == 4) {
document.write("<td><button type='button'>select</button></td>");
}
}
document.write("</tr>")
}
document.write("</table>")
</script>
</body>
</html>
When the select button is clicked the table row should highlight the entire row.
Any idea how to implement it in javascript & css ?
I am using below code to generate a dynamic table-
<!DOCTYPE html>
<html>
<head>
<script>
document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row = 1; row < 5; row++) {
document.write("<tr>");
for (col = 1; col <= 4; col++) {
if(col == 1) {
document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
}
if(col == 2) {
document.write("<td width='140'>Name</td>");
}
if(col == 3) {
document.write("<td width='200'>Location</td>");
}
if(col == 4) {
document.write("<td><button type='button'>select</button></td>");
}
}
document.write("</tr>")
}
document.write("</table>")
</script>
</body>
</html>
When the select button is clicked the table row should highlight the entire row.
Any idea how to implement it in javascript & css ?
- jquery will hlep, is it allowed ? – Pranay Rana Commented Jul 27, 2015 at 12:44
- Yes, do you use jQuery? – Repo Commented Jul 27, 2015 at 12:47
-
Actually I'm not much familiar with
jquery. Can't it be done in javascript ? – Anurag Chakraborty Commented Jul 27, 2015 at 12:51 - 1 Why you are using two nested loops? You don't need second one - you can remove all "if"s and whole for cycle – areim Commented Jul 27, 2015 at 12:52
- @areim yes we can remove it. – Anurag Chakraborty Commented Jul 27, 2015 at 12:53
6 Answers
Reset to default 3Here you go! Add a function to your button onclick while creating it and write a function as below:
DEMO
So changed button html before appending will be
document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
^^^^^Add this
and a function
function highlight(ctrl){
var parent=ctrl.parentNode.parentNode;
parent.style.background='red';
}
UPDATE
To remove previous selected on click of other below is one of the approach you can opt to:
DEMO
CSS
.backChange{
background:red;
}
JS
Scenario 1
function highlight(ctrl){
var elements=document.getElementsByTagName('tr'); //get all the tr elements
for(var i=0;i<elements.length;i++)
elements[i].className=''; //clear the className from all the tr elements
var parent=ctrl.parentNode.parentNode;
parent.className="backChange"; //add ClassName to only this element's parent tr
}
Scenario 2
Now If you have classList that are already there in tr and you just want to add or remove one particular class which changes its style then you can do it as below:
DEMO
function highlight(ctrl){
var elements=document.getElementsByTagName('tr');
for(var i=0;i<elements.length;i++)
elements[i].classList.remove('backChange'); //remove one particular class from list of classNames in that element
var parent=ctrl.parentNode.parentNode;
parent.classList.add("backChange");//Add that particular class to classList of element's parent tr
}
UPDATE 2
Without using Class and applying inline styles you can try as below:
DEMO
function highlight(ctrl){
var elements=document.getElementsByTagName('tr');
for(var i=0;i<elements.length;i++)
elements[i].style.background=''; //remove background color
var parent=ctrl.parentNode.parentNode;
parent.style.background="red";//add it to specific element.
}
You can achieve what you want by adding an onclick function to your button:
<button type='button' onclick='highlight(this)'>
And then include the function before your loop:
function highlight(button) {
button.parentNode.parentNode.className = 'highlight';
// the first parentNode is the td
// the second is the tr,
// then you add a class of highlight to the row
}
And add the css for the highlight:
.highlight {background:red;}
Example fiddle
Have a look at following snippet:
function hightLight(ele)
{
ele.parentElement.parentElement.className = "highlight";
}
document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row=1; row<5; row++)
{
document.write("<tr>");
for (col=1; col<=4; col++)
{
if(col==1)
{ document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
}
if(col==2)
document.write("<td width='140'>Name</td>");
if(col==3)
document.write("<td width='200'>Location</td>");
if(col==4)
document.write("<td><button onclick='hightLight(this)' type='button'>select</button></td>");
}
document.write("</tr>");
}
document.write("</table>");.highlight
{
background-color:yellow;
}<!DOCTYPE html>
<html>
<body>
</body>
</html>I would advise against using a button here and rather use the checkboxes which you already have. If you use a button to select a row, then how would you de-select it? You can then use the buttons to fire up actions on the selected row.
From a raw Javascript perspective (i.e. without using any library like jQuery etc.), you can work your algorithm like this:
- Find all checkboxes in the table,
- Bind a "change" event to all these checkboxes,
- If the checkbox is
checkedthen select the row by changing its parent's (td) parent (tr) background color.
Putting this together:
var chk = document.querySelectorAll("table input[type=checkbox]");
for (i = 0; i < chk.length; i++) {
chk[i].addEventListener("change", function() {
selectRow(this);
});
}
function selectRow(elem) {
if (elem.checked) {
elem.parentNode.parentNode.style.backgroundColor = 'yellow';
} else {
elem.parentNode.parentNode.style.backgroundColor = '';
}
}<table>
<thead>
<tr><th>Select</th><th>Name</th><th>Location</th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Name 1</td>
<td>Location 1</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Name 2</td>
<td>Location 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Name 3</td>
<td>Location 3</td>
</tr>
</tbody>
</table>Try like this if you caan use JQuery Demo
$("button").on("click", function () {
$("tr").each(function () {
$(this).removeClass("highlight");
});
$(this).closest("tr").addClass("highlight");
});
CSS:
.highlight {
background-color:#ccc;
color:#000000;
font-weight:bold;
}
$('#your_table_id').on('click', 'td', function () {
$(this).closest('tr').css({'background-color': 'red'});
});