HTML + JavaScript：如何在单击Javascript中的按钮时突出显示一行？

debugcn 发表于 Dev

阿努拉格·查克拉博蒂（Anurag Chakraborty）

我正在使用下面的代码来生成动态表-

<!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吗？

古鲁帕萨德·J·饶（Guruprasad J Rao）

干得好！onclick在创建按钮时将其添加到按钮中，并编写如下函数：

演示

所以在添加之前更改的按钮html将是

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';
}

更新

要删除先前单击的其他对象，这是您可以选择的一种方法：

演示

的CSS

.backChange{
    background:red;
}

场景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

现在，如果您已经classList有了它，tr而您只想添加或删除一个class更改了它的特定对象，style则可以按照以下步骤进行操作：

演示

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
}

更新2

在不使用Class的情况下，inline styles您可以尝试以下操作：

演示

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.

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。