我正在使用HTML,PHP和JS来创建报告网站。我有几张桌子要展示。在每个表中都有多行tr
,其中有许多列td
。我已经设置了它,以便当我单击其中一个tr
时,它会获得selected
类。我还设置了它,以便单击的td
获得selectedtd
类。我想要的是选择tr
中的所有td
以selectedtd
类,然后在取消选择tr
时删除该类。这是我到目前为止得到的:
此脚本更新tr
,使其具有该类,或者在单击tr
中的任意位置时将其删除。
<script type='text/javascript'>//<![CDATA[
$("#UpdateTable tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
此脚本在单击单个td
时添加或删除类selectedtd
。
<script type='text/javascript'>//<![CDATA[
$("#UpdateTable td").click(function ()
{
$(this).closest('table').find('td').not(this).removeClass('selectedtd');
$(this).toggleClass('selectedtd')
});
//]]>
</script>
我不知道如何让这些更新所选tr
中的所有td
以使类selectedtd
.
不要选择最近的表,而是选择最接近的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>
您可以在一个脚本中轻松完成此操作:
$("#UpdateTable tr").click(function() {
$(this).toggleClass('selected').siblings().removeClass('selected').children().removeClass('selectedtd');
$(this).children().toggleClass('selectedtd');
});
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>
$('td').click(function(el){
// Removes the already selected
$('.selecetedtd').removeClass('selecetedtd');
// Selects current row
$(this).parents('tr')
.toggleClass('selecetedtd');
});
您可以在此处查看正在使用的示例。
在这里。
$("#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>
使用each()
函数
$(".use-address").click(function() {
var $row = $(this).closest("tr"); // Find the row
$row.find("td").each(function()
{
$(this).text("fffff");
$(this).addClass("fffff");
}
);
});
这是工作小提琴这里
如果我理解正确,你可以大大简化这一点:
$('#UpdateTable').on('click', 'td', function() {
$(this).parent().toggleClass('selected').children().toggleClass('selectedtd');
});
https://jsfiddle.net/vr30z7qx/1/
根据需要tr
已经选定,只需使用.find()
在选定的tr
中选择td
的。
尝试下面的代码。
<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>