欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js 在指定位置添加/删除tr,td 并设置样式 及 checkbox全选

程序员文章站 2022-05-25 22:32:27
...
   经验来自于点点滴滴的实践。

    继续记录,留待后用。

    js:在指定位置添加tr ,td 并设置样式,赋值
  
   jsp中内容:
   <table border=1 id="tab"> 
   </table>

    js 实现:
             var tab =document.getElementById("tab");
          //注:insertRow()分为无参和有参。
            //    其中无参为 insertRow(),默认是插入到指定table的最后。
            //   有参为insertRow(n),插入到指定table的第N行。
           var row =tab.insertRow(0);
           //  创建td
           var cell1 = row.insertCell(0);
           // 设置样式
           cell1.style.cssText="padding:4px";
           cell1.innerHTML=
                      "MAIL帐号<input type='text' id='mail'/>"
           //给td 赋值
           cell1.innerText=""        
           var cell2 = row.insertCell(1);

    js:checkbox全选,全不选,以及根据选中的取值  
     //根据name值获取全部checkbox
     var boxes = document.getElementsByName("xzbm");
     var value = new Array(boxes.length);
     for(var i=0;i<boxes.length;i++){
     //全部取消选中
      if(boxes[i].checked){
         boxes[i].checked =false;
     }
     //全选
     if(!(boxes[i].checked)){
         boxes[i].checked = true;
      }
     //选中取值
      if(boxes[i].checked){
        value[i] = boxes[i].value;
     }
  
    } 
    js:实现删除指定tr

function deleteRow(){
var content=document.getElementById("content");
  var len=content.rows.length;
  for(var i=2;i<len;i++){
    content.deleteRow(2);
  }
  }
删除第二行之后的所有tr