我的这张桌子的行甚至是灰色的行(奇数行是白色的):
$("td").filter(function(){ return $(this).text() == '1'; }).text('One');
$("td").filter(function(){ return $(this).text() == '2'; }).text('Two');
$("td").filter(function(){ return $(this).text() == '3'; }).text('Three');
$("td").filter(function(){ return $(this).text() == '4'; }).text('Four');
$("td").filter(function(){ return $(this).text() == '5'; }).text('Five');
$("td").filter(function(){ return $(this).text() == '6'; }).text('Six');
然后我删除了第3行:
$("tr:contains('3')").hide();
现在我的桌子上有第2行和第4行,颜色为灰色。尽管删除了一行,如何保留备用行颜色?
这是我的HTML代码:
<html>
<head>
<link type="text/css" rel="stylesheet" href="css.css" />
<script src="jquery-1.10.1.js"></script>
<script language="Javascript">
function View(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("datatable").innerHTML=xmlhttp.responseText;
$("td").filter(function(){ return $(this).text() == '1'; }).text('One');
$("td").filter(function(){ return $(this).text() == '2'; }).text('Two');
$("td").filter(function(){ return $(this).text() == '3'; }).text('Three');
$("td").filter(function(){ return $(this).text() == '4'; }).text('Four');
$("td").filter(function(){ return $(this).text() == '5'; }).text('Five');
$("td").filter(function(){ return $(this).text() == '6'; }).text('Six');
$("tr:contains('3')").hide();
}
}
xmlhttp.open("POST", "process_this_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
</script>
</head>
<body onload="View();">
<div id="datatable"></div>
</body>
</html>
这是我的CSS:
body{
padding: 100px;
margin: 20;
font: 2em Times New Roman, Helvetica, sans-serif;
}
table{
border-collapse: separate;
border-radius: 10px 10px 10px 10px;
border: 1px solid red;
width: 600px;
box-shadow: -20px 20px 20px #313030;
}
td {
padding: 0.4em;
border: 1px solid red;
}
我认为你会告诉我为tr添加属性,可能会告诉我插入你提供的代码吗?如果是这样,请提供语法。我知道你不能将jquery插入到css中。
周二2013年6月4日美国东部时间下午7:50 这是process_this_table.php中的表结构:
<?php
echo "<table>";
$rows=array('row 1','row 2','row 3');
$columns=array('column 1','column 2','column 3');
$rlength=count($rows);
$clength=count($columns);
for($i=0;$i<$rlength;$i++){
echo "<tr>";
if($i%2){
echo "<td style=\"background-color: rgb(212,212,212);\">".$rows[$i]."</td>";
for($j=1;$j<$clength;$j++)
echo "<td style=\"background-color: rgb(212,212,212);>blah blah</td>";
}
else{
echo "<td>".$rows[$i]."</td>";
for($j=1;$j<$clength;$j++)
echo "<td>blah blah</td>";
}
echo "</tr>";
}
echo "</table>";
?>
此process_this_table.php来自远程服务器,因此我无法修改偶数行上的交替灰色(212,212,212)。为了我的目的,我更希望指定哪一行我想改变颜色而不是做奇数或偶数,比如这个$(“tr:nth-child(2)”)。css(“background-color”,“lightblue”) ;。为什么这段代码不起作用,但是指定一个奇怪的行,如$(“tr:nth-child(1)”)。css(“background-color”,“lightblue”);呢?
周三2013年6月5日美国东部时间下午12:50 一切都归功于你们所有人,尤其是卡尔·安德烈。不过,我还想要一件事。如何重新排列行,例如第4行将在第1行?提前谢谢。
答案 0 :(得分:1)
答案 1 :(得分:1)
这个解决方案怎么样,我认为你可以将它用于你的目的:
$('tr').each(function(i) {
if (i % 2)
$(this).css('background-color', 'red');
else
$(this).css('background-color', 'gray');
});
答案 2 :(得分:0)
我正在完成luk2302的答案。
您需要遍历tr
,但更改td's
css,因为它们是style
标记的。{/ p>
$('tr:visible').each(function(i){
$(this).find('td').css('background-color', i%2 ? 'red':'grey');
})
希望它有效。