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

2024-11-17 11:45:25
推荐回答(5个)
回答1:

这个很简单啊

html :    


  
    
      1
      2
      
    
  

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

回答2:





test jquery


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()));
});
});





4
5



1115
11116




 你原来的class单词拼写错了. 这里用到了jquery,自己看下. 测试是成功的

回答3:

用原生js太麻烦了,我用了jquery 写了个出来(ps ID是唯一的虽然可以用,但是不建议id重复)



  
    
    
    
    
    
    
    
    
      $(document).ready(function(){
        $("#mytable tr").each(function(k){
          $(this).find("#d3").text(Number($(this).find("#d1").text())+Number($(this).find("#d2").text()));
        });
      });
    
  
  
    
      
        4
        5
        
      
      
        1115
        11116
        
      
    
  

回答4:





main.html



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);
    }
    }
    }





4
5



1115
11116




回答5:

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