Question

我有一个HTML表，每行都有一个按钮。这里的目标是当点击一个按钮时，整行将改变背景颜色。代码是：

<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="button" value="press" onclick="myFunction(this)" />
        </td>
    </tr>
    <tr>
        <td>Value3</td>
        <td>Value4</td>
        <td>
            <input type="button" value="press" onclick="myFunction(this)" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    function myFunction(e) {
        //change the background color of the row
    }
</script>

你能帮我解决这个问题吗？谢谢！

Answer 1

您应该使用 class ，并且为了更好的做法，请删除html中的内联函数调用。

使用此功能：

<强> HTML

<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="button" value="press" />
        </td>
    </tr>
    <tr>
        <td>Value3</td>
        <td>Value4</td>
        <td>
            <input type="button" value="press" />
        </td>
    </tr>
</table>

<强>的jQuery

var all_tr = $('tr');
$('td input[type="button"]').on('click', function () {
    all_tr.removeClass('selected');
    $(this).closest('tr').addClass('selected');
});

演示here

（更新）

Answer 2

jQuery的closest方法非常适用于此，因为您在代码中添加了jQuery：

function myFunction(el) {
//change the background color of the row

  $(el).closest('tr').css('background-color', 'red');
}

以非jQuery方式，您可以：

function myFunction(el) {
//change the background color of the row
  while (el && (el.tagName.toLowerCase() != 'tr'))
    el = el.parentNode;

  if (el)
    el.style.backgroundColor = 'red';
}

Answer 3

你可以在jQuery中使用这些解决方案。

  <script type='text/javascript'>
    $('table input').bind('click', function (e) {       
        $(this).parent().parent().addClass('redBackground');    
    });
  </script>

创建CSS类，我将其命名为'redBackground'。

<style type='text/css'>
   .redBackground {
       background: #fff;
   }
</style>

问候。

Answer 4

您可以采用以下方式：http://jsfiddle.net/69sU7/

myFunction = function(btn) {
    $(btn).parent().parent().addClass('highlight');
}

当单击按钮时，使用jQuery，我们捕获btn本身，然后抓住它的父（td），并抓住它的父（tr）。然后，我们将课程highlight添加到tr。

.highlight类会添加到其下方的所有td，背景为黄色。

Answer 5

使用直接属性backgroundColor

e.parentNode.parentNode.style.backgroundColor = '#ff0';

http://jsfiddle.net/cguLU/1/

要重置表中的其他行，请执行以下操作：

http://jsfiddle.net/cguLU/2/

function myFunction(e) {
  var tr = e.parentNode.parentNode;
  var table = e.parentNode.parentNode.parentNode;    
  //set current backgroundColor
    var len = table.childNodes.length;
    for (var i = 0; i < len; i++) {
      if (table.childNodes[i].nodeType == 1) {
        table.childNodes[i].style.backgroundColor = 'transparent';
      }
    }
    tr.style.backgroundColor = '#ff0';
}

Answer 6

使用此http://jsfiddle.net/4P3Jb/

e.parentNode.parentNode.style.background = "red";

单击HTML按钮可更改行的背景颜色

6 个答案:

演示here