js实现点击一个按钮，表格中某行变色，按钮的value与表格中列name值相同的行变色
展开全部
<table>
<tr>
<td name="r1c1">第一行第一列</td>
<td name="r1c2">第一行第二列</td>
</tr>
<tr>
<td name="r2c1">第二行第一列</td>
<td name="r2c2">第二行第二列</td>
</tr>
</table>
<input id="button" type="button" value="r2c1" />
<script>
window.onload = function () {
document.getElementById('button').onclick = function () {
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
if (td.getAttribute('name') == this.value) {
td.parentNode.style.backgroundColor = 'red';
}
}
};
};
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<table>
<tr id="r1">
<td name="r1c1"><input id="button" type="button" value="r1" onClick="changeColor(this)"/></td>
</tr>
<tr id="r2">
<td name="r2c1"><input id="button" type="button" value="r2" onClick="changeColor(this)"/></td>
</tr>
</table>
<script>
function changeColor(obj){
var tri = obj.value;
document.getElementById(tri).style.backgroundColor = 'red';
}
</script>
不通的话自己调一下，盲写的。
<tr id="r1">
<td name="r1c1"><input id="button" type="button" value="r1" onClick="changeColor(this)"/></td>
</tr>
<tr id="r2">
<td name="r2c1"><input id="button" type="button" value="r2" onClick="changeColor(this)"/></td>
</tr>
</table>
<script>
function changeColor(obj){
var tri = obj.value;
document.getElementById(tri).style.backgroundColor = 'red';
}
</script>
不通的话自己调一下，盲写的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
那要循环表格。把表格中那列的数据拿出来与value比较。然后把哪一行的背景色改变。
思路。循环。比较。然后改变样式
思路。循环。比较。然后改变样式
追问
可以具体点么，如何取出数据？给出关键的js代码即可~谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="500" border="1" cellspacing="5" cellpadding="5">
<tr id="RED" style="background:ffffff ">
<td>R1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="GREEN" style="background:ffffff ">
<td>G1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="BLUE" style="background:ffffff ">
<td>B1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input id="rb" value="RED" style="background:red " type="button" onClick="disColor(this.value);">
<input id="gb" value="GREEN" style="background:green" type="button" onClick="disColor(this.value);">
<input id="bb" value="BLUE" style="background:blue " type="button" onClick="disColor(this.value);">
<input id="wb" value="WHITE" style="background:white " type="button" onClick="disColor(this.value);">
<script language="javascript" type="text/javascript">
function disColor(obj){
if(obj=='WHITE')
{
$("RED").style.backgroundColor="WHITE";
$("GREEN").style.backgroundColor="WHITE";
$("BLUE").style.backgroundColor="WHITE";
}
else
{
$(obj).style.backgroundColor =obj;
}
}
function $(obj){
return document.getElementById(obj);
}
</script>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="500" border="1" cellspacing="5" cellpadding="5">
<tr id="RED" style="background:ffffff ">
<td>R1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="GREEN" style="background:ffffff ">
<td>G1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="BLUE" style="background:ffffff ">
<td>B1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input id="rb" value="RED" style="background:red " type="button" onClick="disColor(this.value);">
<input id="gb" value="GREEN" style="background:green" type="button" onClick="disColor(this.value);">
<input id="bb" value="BLUE" style="background:blue " type="button" onClick="disColor(this.value);">
<input id="wb" value="WHITE" style="background:white " type="button" onClick="disColor(this.value);">
<script language="javascript" type="text/javascript">
function disColor(obj){
if(obj=='WHITE')
{
$("RED").style.backgroundColor="WHITE";
$("GREEN").style.backgroundColor="WHITE";
$("BLUE").style.backgroundColor="WHITE";
}
else
{
$(obj).style.backgroundColor =obj;
}
}
function $(obj){
return document.getElementById(obj);
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function changeRed(obj){
$(obj).siblings().css(“background-color”, "red");
}
<table>
<tr>
<td></td><td></td><td></td><td ><button onclick="changeRed(this)">按钮</button></td>
</tr>
<tr>
<td></td><td></td><td></td><td ><button onclick="changeRed(this)">按钮</button></td>
</tr>
<tr>
<td></td><td></td><td></td><td ><button onclick="changeRed(this)">按钮</button></td>
</tr>
</table>
$(obj).siblings().css(“background-color”, "red");
}
<table>
<tr>
<td></td><td></td><td></td><td ><button onclick="changeRed(this)">按钮</button></td>
</tr>
<tr>
<td></td><td></td><td></td><td ><button onclick="changeRed(this)">按钮</button></td>
</tr>
<tr>
<td></td><td></td><td></td><td ><button onclick="changeRed(this)">按钮</button></td>
</tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
