Question

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

<!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＆amp; css？

Answer 1

您可以通过在按钮上添加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;}

Example fiddle

Answer 2

你走了！在创建按钮onclick时添加一个函数并编写如下函数：

<强> DEMO

在添加之前更改按钮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';
}

<强>更新

要删除以前选中的以下其他选项，您可以选择以下方法之一：

<强> DEMO

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

现在，如果您classList已经有tr，并且您只想添加或删除一个更改其class的特定style，那么您可以执行此操作如下：

<强> 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
}

更新2

不使用Class并应用inline styles，您可以尝试如下：

<强> 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.

}

Answer 3

查看以下代码段：

＆＃13;

.highlight
{
  background-color:yellow;
  }

＆＃13;

<!DOCTYPE html>
<html>
<body>
</body>
</html>

＆＃13;

$report = DeliveryProfitReport::where('id', $id)->with('car_info', 'basic_customer')->get();

＆＃13;

Answer 4

我建议不要在此处使用button，而是使用您已有的checkboxes。如果您使用button选择行，那么您将如何取消选择它？然后，您可以使用button来启动所选行的操作。

从原始的Javascript角度（即不使用像jQuery等任何库），你可以像这样工作你的算法：

查找表格中的所有复选框
绑定＆＃34;更改＆＃34;事件到所有这些复选框，
如果复选框为checked，则通过更改其父级（td）父级（tr）背景颜色来选择该行。

把它们放在一起：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

如果您使用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;
}

Answer 6

<a href="#top"  onclick = $("#menu-close").click(); >Start Bootstrap</a>

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

6 个答案: