js动态表格

来源：互联网发布：nba95年总决赛数据编辑：程序博客网时间：2024/06/07 23:03

此文是javascript动态表格相关，能够进行动态为表格增加一行（列），删除多行（列），隔行（列）换色，全部选中行（列），全部取消行（列），编辑表格内容及确定，让表格内容居左，中，右显示。

部分截图如下：

<html>
<script>
  var number = 0;
  var number1 = 0;
  //增加一行
  function addrow() {
   var table = document.getElementById("data");
   var rows = table.getElementsByTagName("tr");
   if(!rows.length) {
    var row = table.insertRow(0);
    var column1 = row.insertCell(0);
       column1.innerHTML = "请选择";
       column1.width = "100px";
       column1.align = "center";
       var column2 = row.insertCell(1);
       column2.innerHTML = "<input type = \"checkbox\" id = \"d"+number1+"\" name = \"check\" value = \""+number1+"\">";
       column2.align = "center"
       var row1 = table.insertRow(1);
       var column3 = row1.insertCell(0);
       column3.innerHTML = "<input type = \"checkbox\" id = \"c"+number+"\" name = \"check\" value = \""+number+"\">";
       column3.align = "center";
       var column4 = row1.insertCell(1);
       column4.innerHTML = "null";
       column4.width = "100px";
       number ++;
       number1 ++;
   } else {
    var row = table.insertRow(rows.length);
    var tds = rows[0].getElementsByTagName("td");
    for(i=0; i<tds.length; i++) {
     var column = row.insertCell(i);
     if(i == 0) {
      column.innerHTML = "<input type = \"checkbox\" id = \"c"+number+"\" name = \"check\" value = \""+number+"\">";
      number ++;
      column.align = "center";
     } else {
      column.innerHTML = "null";
     }
    }
   }
  }

  //增加一列
  function addcol() {
   var table = document.getElementById("data");
   var rows = table.getElementsByTagName("tr");
   if(!rows.length) {
    var row = table.insertRow(0);
    var column1 = row.insertCell(0);
       column1.innerHTML = "请选择";
       column1.width = "100px";
       column1.align = "center";
       var column2 = row.insertCell(1);
       column2.innerHTML = "<input type = \"checkbox\" id = \"d"+number1+"\" name = \"check\" value = \""+number1+"\">";
       colnmu2.align = "center";
       var row1 = table.insertRow(1);
       var column3 = row1.insertCell(0);
       column3.innerHTML = "<input type = \"checkbox\" id = \"c"+number+"\" name = \"check\" value = \""+number+"\">";
       column3.align = "center";
       var column4 = row1.insertCell(1);
       column4.innerHTML = "null";
       colnmu4.width = "100px";
       number ++;
       number1 ++;
   } else {
    for(i=0; i<rows.length; i++) {
     var tds = rows[i].getElementsByTagName("td");
     var column = rows[i].insertCell(tds.length);
     if(i == 0) {
      column.innerHTML = "<input type = \"checkbox\" id = \"d"+number1+"\" name = \"check\" value = \""+number1+"\">";
      number1 ++;
      column.align = "center";
     } else {
      column.innerHTML = "null";
     }
     column.width = "100px";
    }
   }
  }

  //删除多行
  function deleterow() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   var tmp;
   for(i=row.length-1; i>0; i--) {
    var tds = document.getElementById("c"+(i-1)+"");
    if(tds.checked) {
     table.deleteRow(i);
     number --;
    }
   }
   var table1 = document.getElementById("data");
   var row1 = table.getElementsByTagName("tr");
   var tmp = 0;
   for(i=1; i<row1.length; i++) {
    var tds = row1[i].getElementsByTagName("td");
    tds[0].innerHTML = "<input type = \"checkbox\" id = \"c"+tmp+"\" name = \"check\" value = \""+tmp+"\">";
    tmp ++;
   }
  }

  //删除多列
  function deletecol() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   var tds = row[0].getElementsByTagName("td");
   for(i=tds.length-1; i>0; i--) {
    var td = document.getElementById("d"+(i-1)+"");
    if(td.checked) {
     for(j=0; j<row.length; j++) {
      table.rows[j].deleteCell(i);
     }
     number1 --;
    }
   }
   var table1 = document.getElementById("data");
   var row1 = table.getElementsByTagName("tr");
   var tds = row1[0].getElementsByTagName("td");
   var tmp = 0;
   for(i=1; i<tds.length; i++) {
    tds[i].innerHTML = "<input type = \"checkbox\" id = \"d"+tmp+"\" name = \"check\" value = \""+tmp+"\">";
    tmp ++;
    //alert(tds[i].innerHTML);
   }

  }

  //全部选中行
  function allselectrow() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var r = document.getElementById("c"+(i-1)+"");
    r.checked = true;
   }
  }

  //全部取消行
  function allcancelrow() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var r = document.getElementById("c"+(i-1)+"");
    r.checked = false;
   }
  }

  //全部选中列
  function allselectcol() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   var tds = row[0].getElementsByTagName("td");
   for(i=1; i<tds.length; i++) {
    var col = document.getElementById("d"+(i-1)+"");
    col.checked = true;
   }
  }

  //全部取消列
  function allcancelcol() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   var tds = row[0].getElementsByTagName("td");
   for(i=1; i<tds.length; i++) {
    var col = document.getElementById("d"+(i-1)+"");
    col.checked = false;
   }
  }

  //隔行换色
  function changecolorrow() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   /*for(i=0; i<row.length; i++) {
    if(i%2 == 0) {
     row[i].style.background = "white";
    } else {
     row[i].style.background = "blue";
    }
   }*/
   for(i=0; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    for(j=0; j<tds.length; j++) {
     if(i%2 == 0) {
      tds[j].style.background = "CCFFCC";
     } else {
      tds[j].style.background = "FFFFCC";
     }
    }
   }
  }

  //隔列换色
  function changecolorcol() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=0; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    for(j=0; j<tds.length; j++) {
     if(j%2 == 0) {
      tds[j].style.background = "FFCCFF";
     } else {
      tds[j].style.background = "CCFFFF";
     }
    }
   }
  }

  //修改表格内容
  function edit() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    var t = document.getElementById("c"+(i-1)+"");
    if(t.checked) {
     for(j=1; j<tds.length; j++) {
      var td = document.getElementById("d"+(j-1)+"");
      if(td.checked) {
       tds[j].innerHTML = "<input type = \"text\" id = \"t"+i+""+j+"\" name = \"myt\">";
      }
     }
    }
   }
  }

  //确定修改
  function ok() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    var t = document.getElementById("c"+(i-1)+"");
    if(t.checked) {
     for(j=1; j<tds.length; j++) {
      var td = document.getElementById("d"+(j-1)+"");
      if(td.checked) {
       var txt = document.getElementById("t"+i+""+j+"");
       tds[j].innerHTML = txt.value;
       if(!txt.value) {
        tds[j].innerHTML = "null";
       }
      }
     }
    }
   }
  }

  //表格内容居中显示
  function showcenter() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    var t = document.getElementById("c"+(i-1)+"");
    if(t.checked) {
     for(j=1; j<tds.length; j++) {
      var td = document.getElementById("d"+(j-1)+"");
      if(td.checked) {
       tds[j].align = "center";
      }
     }
    }
   }
  }

  //表格内容居左显示
  function showleft() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    var t = document.getElementById("c"+(i-1)+"");
    if(t.checked) {
     for(j=1; j<tds.length; j++) {
      var td = document.getElementById("d"+(j-1)+"");
      if(td.checked) {
       tds[j].align = "left";
      }
     }
    }
   }
  }

  //表格内容居右显示
  function showright() {
   var table = document.getElementById("data");
   var row = table.getElementsByTagName("tr");
   for(i=1; i<row.length; i++) {
    var tds = row[i].getElementsByTagName("td");
    var t = document.getElementById("c"+(i-1)+"");
    if(t.checked) {
     for(j=1; j<tds.length; j++) {
      var td = document.getElementById("d"+(j-1)+"");
      if(td.checked) {
       tds[j].align = "right";
      }
     }
    }
   }
  }
</script>
<body>
  <form>
   <table width = "80%" border = "1">
    <tr><th colspan = "7" height = "15%" bgcolor = "CCFFFF" align = "left">动态表格相关功能</th></tr>
    <tr height = "20%" bgcolor ="FF99FF" ><td align = "center">增加行列</td>
     <td align = "center">删除行列</td>
     <td align = "center">全部选择</td>
     <td align = "center">取消全选</td>
     <td align = "center">表格换色</td>
     <td align = "center">编辑修改</td>
     <td align = "center">显示格式</td>
    </tr>
    <tr height = "40%" bgcolor = "993399" ><td align = "center"><input type = "button" value = "增加一行" onclick = "addrow()">
      <input type = "button" value = "增加一列" onclick = "addcol()"></td>
     <td align = "center"><input type = "button" value = "删除多行" onclick = "deleterow()">
      <input type = "button" value = "删除多列" onclick = "deletecol()"></td>
     <td align = "center"><input type = "button" value = "全部选中行" onclick = "allselectrow()">
      <input type = "button" value = "全部选中列" onclick = "allselectcol()"></td>
     <td align = "center"><input type = "button" value = "全部取消行" onclick = "allcancelrow()">
      <input type = "button" value = "全部取消列" onclick = "allcancelcol()"></td>
     <td align = "center"><input type = "button" value = "隔行换色" onclick = "changecolorrow()">
      <input type = "button" value = "隔列换色" onclick = "changecolorcol()"></td>
     <td align = "center"><input type = "button" value = "编辑内容" onclick = "edit()">
      <input type = "button" value = "确定修改" onclick = "ok()"></td>
     <td align = "center"><input type = "button" value = "居左显示" onclick = "showleft()">
      <input type = "button" value = "居右显示" onclick = "showright()">
      <input type = "button" value = "居中显示" onclick = "showcenter()"></td>
    </tr>
   </table>
  </form>
  <form>
   <table id = "data" border = "1">
   </table>
  </form>
</body>
</html>

0 0