3

すべての行にボタンがある 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>

これで私を助けてもらえますか？ありがとう！

4

6 に答える 6

5

代わりにクラスを使用し、適切な方法として、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');
});

デモはこちら

（更新しました）

于 2013-08-29T18:54:02.240 に答える
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';
}
于 2013-08-29T18:52:38.007 に答える
2

これらのソリューションを 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>

よろしく。

于 2013-08-29T18:53:34.523 に答える
1

直接プロパティ 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';
}
于 2013-08-29T18:54:50.593 に答える
1

これを行う方法は次のとおりです。http://jsfiddle.net/69sU7/

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

ボタンがクリックされると、jQuery を使用して btn 自体をキャプチャし、その親 ( ) を取得して、その親 ( td) を取得しtrます。次に、それにクラスhighlightを追加しtrます。

このクラスは、その下のすべての に黄色の背景を.highlight追加します。td

于 2013-08-29T18:51:15.827 に答える
0

これを使用http://jsfiddle.net/4P3Jb/

e.parentNode.parentNode.style.background = "red";
于 2013-08-29T18:51:36.517 に答える