js遍历table下面所有td，并设置个别td的值高分求大神

Posted 2023-05-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js遍历table下面所有td，并设置个别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

跪求大神

这个很简单啊

html :

这个是上面的，需求要第三个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;

追问

不行额

追答

那我就没招了，你自己跑不起来，我也没法子帮你

参考技术A <!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,自己看下. 测试是成功的

追问

不行额

参考技术B

用原生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 百度提供的，首先你的电脑得能上网

看了一下几个人回答的问题都是可以的，楼主只是不想给分

参考技术C <!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"

参考技术D 【每个tr的class和id一样】？（id可以相同？）
【遍历table后设置td的id为d3的值为d1+d2】？（di+d2 什么意思，怎么个加法？）
才疏学浅，表示不太明白，但是帮你顶下。