js遍历table下面 所有td，并设置个别td的值 高分 求大神 120
<tableid="mytable"><trcalss="test"><tdid="d1">4</td><tdid="d2">5</td><tdid="d3"></td>...
<table id="mytable">
<tr calss="test">
<td id="d1">4</td>
<td id="d2">5</td>
<td id="d3"></td>
</tr>
<tr calss="test">
<td id="d1">1115</td>
<td id="d2">11116</td>
<td id="d3"></td>
</tr>
</table>
如上table已知table的id、tr的class、td的id，一个table里有多个相同的tr，每个tr的class和id一样 但是值不一样
求大神 遍历table后设置td的id为d3的值为d1+d2
跪求大神 展开
<tr calss="test">
<td id="d1">4</td>
<td id="d2">5</td>
<td id="d3"></td>
</tr>
<tr calss="test">
<td id="d1">1115</td>
<td id="d2">11116</td>
<td id="d3"></td>
</tr>
</table>
如上table已知table的id、tr的class、td的id，一个table里有多个相同的tr，每个tr的class和id一样 但是值不一样
求大神 遍历table后设置td的id为d3的值为d1+d2
跪求大神 展开
5个回答
展开全部
这个很简单啊
html :
<table id="table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td></td>
</tr>
</tbody>
</table>
这个是上面的，需求要第三个td的值要等于前两个td的值相加
下面是俩个版本的js代码
js:
//jquery :
//jq的实现很简单
var table = $('#table');//找到这个table
var trs = table.find('tbody tr');//找到这个表格下面的tbody下面的所有的tr
trs.each(function(){
var tr = $(this);//针对每个tr做处理
var tds = tr.find('td');//拿到这个tr下面所有的td
if(tds.length === 3){//只处理下面有3个td的情况
var num_1 = +tds.eq(0).text();//第一个td的值，前面的+号可以将他转换成数字用来计算
var num_2 = +tds.eq(0).text();//第二个td的值
tds.eq(2).text(num_1 + num_2);//第三个td的值等于他前俩个td的值相加
}
});
//原生js的,ie8+支持
var table = document.querySelector('#table');
var trs = tbody.querySelectorAll('tbody > tr');
for(var i=0,tr; tr = trs[i]; i++){
var tds = tr.querySelectorAll('td');
if(tds.length === 3){
var n1 = +tds[0].innerText;
var n2 = +tds[1].innerText;
tds[2].innerText = n1 + n2;
}
}
追问
不行额
追答
那我就没招了，你自己跑不起来，我也没法子帮你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test jquery</title>
<script src="jquery.js"></script>
<script type="text/javascript">
function add(a,b){
return parseInt(a,10) + parseInt(b,10);
}
$(function(){
$(".test").toArray().forEach(function(x){
$("#d3", $(x)).text(add($("#d1",$(x)).text(), $("#d2",$(x)).text()));
});
});
</script>
</head>
<body>
<table id="mytable">
<tr class="test">
<td id="d1">4</td>
<td id="d2">5</td>
<td id="d3"></td>
</tr>
<tr class="test">
<td id="d1">1115</td>
<td id="d2">11116</td>
<td id="d3"></td>
</tr>
</table>
</body>
</html>
你原来的class单词拼写错了. 这里用到了jquery,自己看下. 测试是成功的
追问
不行额
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用原生js太麻烦了，我用了jquery 写了个出来（ps ID是唯一的虽然可以用，但是不建议id重复）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="style/.css" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytable tr").each(function(k){
$(this).find("#d3").text(Number($(this).find("#d1").text())+Number($(this).find("#d2").text()));
});
});
</script>
</head>
<body>
<table id="mytable">
<tr calss="test">
<td id="d1">4</td>
<td id="d2">5</td>
<td id="d3"></td>
</tr>
<tr calss="test">
<td id="d1">1115</td>
<td id="d2">11116</td>
<td id="d3"></td>
</tr>
</table>
</body>
</html>
追问
不行额
追答
怎么会不行，直接复制就行了，当然jquery 百度提供的，首先你的电脑得能上网
看了一下几个人回答的问题都是可以的，楼主只是不想给分
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>main.html</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function ()
{
var table = document.getElementById ('mytable');
var rows = table.rows;
for ( var i = 0; i < rows.length; i++)
{
if (rows[i].className == 'test')
{
var txt = document.createTextNode ();
txt.nodeValue = Number (rows[i].cells[0].firstChild.nodeValue)
+ Number (rows[i].cells[1].firstChild.nodeValue);
rows[i].cells[2].appendChild (txt);
}
}
}
</script>
</head>
<body>
<table id="mytable">
<tr class="test">
<td id="d1">4</td>
<td id="d2">5</td>
<td id="d3"></td>
</tr>
<tr class="test">
<td id="d1">1115</td>
<td id="d2">11116</td>
<td id="d3"></td>
</tr>
</table>
</body>
</html>
追问
不行额
追答
你的tr的class都写错了
calss="test"
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
【每个tr的class和id一样】？（id可以相同？）
【遍历table后设置td的id为d3的值为d1+d2】？（di+d2 什么意思，怎么个加法？）
才疏学浅，表示不太明白，但是帮你顶下。
【遍历table后设置td的id为d3的值为d1+d2】？（di+d2 什么意思，怎么个加法？）
才疏学浅，表示不太明白，但是帮你顶下。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
