Question

我正在使用HTML，PHP和JS来创建报告网站。我有几张桌子正在展示。在每个表中，有多行tr，其中包含许多列td。我进行了设置，以便当我点击其中一个tr时，它会获得selected的类。我也进行了设置，以便点击的td获得selectedtd类。我想要的是让td中的所有tr被选中以获得类selectedtd，然后在取消选择tr时删除该类。这是我到目前为止所得到的：

此脚本会将tr更新为拥有该类，或者在点击tr中的任何位置时将其删除。

<script type='text/javascript'>//<![CDATA[
    $("#UpdateTable tr").click(function ()
    {
        $(this).toggleClass('selected').siblings().removeClass('selected');
    });
    //]]>
</script>

单击selectedtd时，此脚本会将单词td添加或删除。

<script type='text/javascript'>//<![CDATA[
    $("#UpdateTable td").click(function ()
    {
        $(this).closest('table').find('td').not(this).removeClass('selectedtd');
        $(this).toggleClass('selectedtd')
    });
    //]]>
</script>

我无法弄清楚如何让这些内容更新所选td中的所有tr以获得课程selectedtd。

Answer 1

您只需一个脚本即可轻松完成此操作：

table {
  border-left: 1px solid grey;
  border-top: 1px solid grey;
  }
td {
  padding: 5px;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  }

tr.selected {
  color: white;
  }

td.selectedtd {
  background-color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="UpdateTable">
  <tr>
    <td>1.1</td>    
    <td>1.2</td>    
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>    
    <td>2.2</td>    
    <td>2.3</td>
  </tr>
    <tr>
    <td>3.1</td>    
    <td>3.2</td>    
    <td>3.3</td>
  </tr>
</table>

{{1}}

Answer 2

不是选择最近的表格，而是选择最接近的tr并执行以下操作：

$(document).ready(function () {
  $('td').click(function () {
    // first remove all classes
    $('td, tr').removeClass('selectedtd selected active');
    
    // $(this) shows to currently clicked TD
    $(this).closest('tr').addClass('active');
    $(this).closest('tr').find('td').addClass('selectedtd');
    $(this).addClass('selected');
  });
})

td {
  color: #999;
  padding: 5px 10px;
  cursor: pointer;
}

td:hover {
  background-color: #ddd;
  }

tr {
  border-bottom: 1px solid transparent;
}
.selectedtd {
  color: #000;
}
.selected {
  color: #0d0;
}
.active {
  border-bottom-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 3

$('td').click(function(el){
  // Removes the already selected
  $('.selecetedtd').removeClass('selecetedtd');

  // Selects current row
  $(this).parents('tr')
    .toggleClass('selecetedtd');
});

您可以看到正在使用的示例here。

Answer 4

下面。

$("#UpdateTable tr").click(function ()
{              
    $(this).find('td').each(function(){
      $(this).addClass('selectedtd');
    });
  
    $(this).siblings('tr').each(function(){
      $(this).find('td').removeClass('selectedtd');
    });
    
});

.selectedtd{
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="UpdateTable">
  <tr>
    <td>TD 1</td>
    <td>TD 2</td>
    <td>TD 3</td>
  </tr>
  <tr>
    <td>TD 4</td>
    <td>TD 5</td>
    <td>TD 6</td>
  </tr>
  <tr>
    <td>TD 7</td>
    <td>TD 8</td>
    <td>TD 9</td>
  </tr>
</div>

Answer 5

如果我理解你的话，你可以大量简化：

$('#UpdateTable').on('click', 'td', function() {
    $(this).parent().toggleClass('selected').children().toggleClass('selectedtd');
});

https://jsfiddle.net/vr30z7qx/1/

Answer 6

使用each()功能

$(".use-address").click(function() {
        var $row = $(this).closest("tr");    // Find the row
        $row.find("td").each(function()
        {
                $(this).text("fffff");    
          $(this).addClass("fffff");    
        }
        ); 

    });

这是工作小提琴 here

Answer 7

根据需要tr已被选中，只需使用.find()选择所选td中的tr。

尝试以下代码。

<script type='text/javascript'>
  //< ![CDATA[
  $(function() {
    $("#UpdateTable tr").click(function() {
      $(this).toggleClass('selected').find('td').toggleClass('selectedtd');
    });
  });
  //]]>
</script>

完成示例：

td.selectedtd {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type='text/javascript'>
  //< ![CDATA[
  $(function() {
    $("#UpdateTable tr").click(function() {
      $(this).toggleClass('selected').find('td').toggleClass('selectedtd');
    });
  });
  //]]>
</script>

<table id="UpdateTable">
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>

当TR被选中时，如何在TR中为每个TD添加一个类

7 个答案: