HTML + JavaScript：如何在JavaScript中点击按钮时突出显示一行？ [英] HTML+JavaScript: How to highlight a row on click of a button in Javascript?
问题描述
我使用以下代码生成动态表 -
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>
当单击选择按钮时，表行应突出显示整行。
任何想法如何在 javascript & css ？
When the select button is clicked the table row should highlight the entire row.
Any idea how to implement it in javascript & css ?
推荐答案
在创建按钮时 onclick 中添加一个函数，并编写如下函数：
Here you go! Add a function to your button onclick while creating it and write a function as below:
DEMO
所以更改按钮html在添加之前将是
So changed button html before appending will be
document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
^^^^^Add this
和一个函数
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
情景1
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
}
场景2
Scenario 2
现在如果您已经有 classList 在 tr 中，您只需要添加或删除一个特殊的类即可更改其样式，则您可以执行以下操作：
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.
}
这篇关于HTML + JavaScript：如何在JavaScript中点击按钮时突出显示一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
