HTML+JavaScript:如何在JavaScript中单击按钮时突出显示一行

HTML+JavaScript: How to highlight a row on click of a button in Javascript?

本文关键字：显示 一行 按钮 JavaScript 单击 HTML+JavaScript      更新时间：2023-09-26

我使用下面的代码生成一个动态表-

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

单击select按钮时，表行应突出显示整个行。知道如何在javascript中实现它吗?css ?

给你!在创建按钮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;
}

JS

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

现在，如果你已经有了tr中的classList，你只是想添加或删除一个特定的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.
}

你可以通过给你的按钮添加一个onclick函数来实现你想要的:

<button type='button' onclick='highlight(this)'>

然后在循环之前包含函数:

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
}

并为高亮添加css:

.highlight {background:red;}

例子小提琴

看看下面的代码片段:

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>

我建议不要在这里使用button，而是使用您已经拥有的checkboxes。如果您使用button来选择一行，那么您将如何取消选择它?然后，您可以使用button s在选定的行上启动操作。

从原始Javascript的角度来看(即不使用任何库，如jQuery等)，你可以像这样工作你的算法:

  1. 查找表中的所有复选框，
  2. 将"change"事件绑定到所有这些复选框，
  3. 如果复选框是checked，则通过更改其父(td)父(tr)的背景颜色来选择行。

把这些放在一起:

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>

如果你可以使用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'});
});
相关文章：