Question

我有两张桌子：

<table class="highlight_row" id="table1">
  <tr id="first_row">
    <td><input type="checkbox" id="first">first thing</td>
    <td><input type="checkbox" id="second">second thing</td>    
    <td><input type="checkbox" id="third">third thing</td>
  </tr>
</table>

<table class="highlight_td" id="table2">
  <tr id="second_row">
    <td><input type="checkbox" id="fourth">fourth thing</td>
    <td><input type="checkbox" id="fifth">fifth thing</td>    
    <td><input type="checkbox" id="sixth">sixth thing</td>      
  </tr>
</table>

我试图区分它们 - 当我检查第一个表中的任何一个框时，我希望突出显示整行，当我在第二个表中选中一个框时，我希望只显示该td

我能够突出显示行（使用addClass（）到'选定'颜色），但是当我指定表类时，我仍然得到第二个表的整行，当我只想要td时（我从长远来看，通过类而不是id识别的数字会更好，因为我添加了更多的表格。

jquery代码：

$(".highlight_row").click(function(){
  $(":checkbox").change(function() {
    $(this).closest("tr").toggleClass("selected", this.checked)
  })
});

Answer 1

可能是this fiddle之类的东西？

您的HTML。

CSS：

public void makeGrass(double posX, double posY, double posZ)
 {       
    GameObject grassLeaf1 = new GameObject();
    Mesh grassLeaf1mesh = new Mesh("grassLeaf1.obj");
    Material grassLeaf1material = new Material
    (new Texture("GrassUVTex.png"), 1, 8, new Texture("GrassUVTex_NRM.jpg"), new Texture("GrassUVTex_DISP.jpg"), 0.008f, -0.5f);
    MeshRenderer grassLeaf1Renderer = new MeshRenderer(grassLeaf1mesh, grassLeaf1material);
    grassLeaf1.AddComponent(grassLeaf1Renderer);
    grassLeaf1.GetTransform().GetPos().Set((float)posX, (float)posY, (float)posZ);
    grassLeaf1.GetTransform().SetScale(new Vector3f (2, 2, 2));
    grassLeaf1.GetTransform().SetRot(new Quaternion(new Vector3f(0, 1, 0), (float) Math.toRadians(0)));     
    game.AddObject(grassLeaf1);
}

JS：

.highlight { background: #ff0; }

Answer 2

对于第一个表格，您需要评估所有复选框，以便它不会突出显示。第二个表格要容易得多。

小提琴：http://jsfiddle.net/24vm61dk/

$(function () {
    // Highlight Row
    $('#table1 input[type="checkbox"]').on('change', function () {
        var anyChecked = false;
        $(this).closest('tr').find('input[type="checkbox"]').each(function () {
            if ($(this).prop('checked')) {
                anyChecked = true;
            }
        });
        if (anyChecked) {
            $(this).closest('tr').addClass('highlight');
        } else {
            $(this).closest('tr').removeClass('highlight');
        }
    });

    // Highlight Cell
    $('#table2 input[type="checkbox"]').on('change', function () {
        var checked = $(this).prop('checked');
        if (checked) {
            $(this).closest('td').addClass('highlight');
        } else {
            $(this).closest('td').removeClass('highlight');
        }
    });
});

Answer 3

显示的代码是在整个表的单击处理程序中添加更改处理程序。

这将导致复合事件，如果用户点击表格中的很多内容，可能会导致严重的浏览器性能问题。

简单地说，点击表格4次，每次复选框改变时，它将触发4个更改处理程序

行突出显示的一种简单方法是使用行中已选中复选框的计数来确定类状态

$('table.highlight_row input:checkbox').change(function(){
      var $row = $(this).closest('tr'),
          hasChecked = $row.find(':checkbox:checked').length;

      $row.toggleClass('selected', hasChecked);          
});

单元格突出显示更加简单......只需根据选中的状态切换父单元格上的类

$('table.highlight_td input:checkbox').change(function(){
    $(this).parent().toggleClass('selected', this.checked);
});

Answer 4

对于行使用：

.highlight_row .selected {
    background: yellow;
}

用于细胞使用：

.highlight_td .selected td:nth-child(1) {
    background: yellow;
}

使用jquery突出显示tr或td

4 个答案: