Question

我在html中有一张表。

<table>
  <tr>
    <td>
     <button onclick="someFunction()">
    </td>
    <td>data</td>
  </tr>
  <tr>
    <td>
     <button onclick="someFunction()">
    </td>
    <td>data</td>
  </tr>
  <tr>
    <td>
     <button onclick="someFunction()">
    </td>
    <td>data</td>
  </tr>
</table>

每一行都有动态ID，这是我的问题我要突出显示按下按钮的表格的当前行。

我怎样才能实现它？

Answer 1

一个好的方法是改变你的标记，如

<table id="mytable">
    <tr>
        <td><button>click</button></td>
        <td>data</td>
    </tr>
    <tr>
        <td><button>click</button></td>
        <td>data</td>
    </tr>
    <tr>
        <td><button>click</button></td>
        <td>data</td>
    </tr>
</table>

和

#mytable tr.highlight{
    background-color: yellow;
}

然后

$('#mytable button').click(function(){
    $('#mytable tr.highlight').removeClass('highlight');
    $(this).closest('tr').addClass('highlight');
    someFucntion();
})

演示：Fiddle

Answer 2

在jquery中使用closest()选择父<tr>。

HTML

<tr><td><button onclick="someFucntion(this)"></td><td>data</td></tr>

JS

function someFunction(elm){
 $("tr.highLightClass").removeClass("highLightClass");// remove class if it is having someone
$(elm).closest("tr").addClass("highLightClass"); // here selected row

}

DEMO

如果您想使用“最佳做法”，请删除所有内联处理程序。试试这个：

$("button.someClass").click(function () {
    $("tr.highLightClass").removeClass("highLightClass"); // remove class if it is having someone
    $(this).closest("tr").addClass("highLightClass"); // here selected row

});

DEMO

Answer 3

Onclick已经过时了，这是一个非常糟糕的做法。将一个类/ id添加到选择器..

<table>
<tr><td><button class="clickMe"></td><td>data</td></tr>
</table>

JavaScript：

$('body').on("click", ".clickMe", function(){
    var that = this;
    that.closest("tr").addClass("highlightMe");
});

为何使用？

如果你的表是动态生成的，或者是在旅途中添加行，你也应该观察新的动态元素。

Answer 4

根据您的问题，我了解以下内容：当您点击内部按钮时，您希望突出显示相应的<tr>。

这是一个JSFiddle，展示了我的答案：http://jsfiddle.net/WBison/2vkfn5uy/2/

基本上，使用事件对象来检索目标节点（按钮），然后是父节点（<td>），然后是父节点（<tr>）。然后使用您想要改变风格的任何方法。

代码：

按钮功能调用：<button onclick="someFunction(event)">

function someFunction(e) {
    e.target.parentNode.parentNode.style.backgroundColor = "blue";
}

希望这有帮助。

突出显示表中的选定行

4 个答案:

HTML

JS

DEMO

DEMO