js操作table

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态表格</title>
</head>
<body>
<p>动态表格彻底研究</p>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作,是目前应用开发中常用的技术</p>
  <p>
    <input type="button" name="Submit" value="刷新" onclick="onRefresh()" />
    <input type="button" name="Submit2" value="全选"  onclick="selectall()"/>
    <input type="button" name="Submit8" value="反选" onclick="inverse()" />
    <input type="button" name="Submit3" value="不选" onclick="noselect()"/>
    <input type="button" name="Submit4" value="添加行与列" onclick="insert_row()" />
    <input type="button" name="Submit7" value="删除选择" onclick="delRow()" />
    <input type="button" name="Submit5" value="拷贝选择" onclick="copyRow()"/>
    <input type="button" name="Submit92" value="居中对齐"  onclick="tableAlign()"/>
    <input type="button" name="Submit922" value="隔行变色"  onclick="changeColor()"/>
</p>
<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable">
  <tr>
    <td width="7%">
      <label>
        <input type="checkbox" name="checkbox" value="checkbox" />
      </label>    </td>
    <td width="51%">1</td>
    <td width="14%">1</td>
    <td width="14%">1</td>
    <td width="14%">1</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox2" value="checkbox" /></td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox3" value="checkbox" /></td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox4" value="checkbox" /></td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox5" value="checkbox" /></td>
    <td>5</td>
    <td colspan="2">55</td>
    <td>5</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox6" value="checkbox" /></td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>56</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox7" value="checkbox" /></td>
    <td>777</td>
    <td>7</td>
    <td>77</td>
    <td>7</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox8" value="checkbox" /></td>
    <td>88</td>
    <td>8</td>
    <td>88</td>
    <td>77</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox9" value="checkbox" /></td>
    <td>999</td>
    <td>99</td>
    <td>99</td>
    <td>999</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox10" value="checkbox" /></td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
  </tr>
</table>
<br />
<p></p>

</body>
</html>

 

js代码:

<script type="text/javascript">
    var form = document.forms["form1"];
    var table = document.getElementById("myTable");
    var selectBox = table.getElementsByTagName("input");
    var tr = table.getElementsByTagName("tr");
    var clicked = true;
        function insert_row(){
          //alert(table.rows[0].cells.length)
var thisrow = table.insertRow(0);
          var thiscell = thisrow.insertCell(0);
          thiscell.innerHTML = "<input type=\"checkbox\" name=\"checkbox10\" value=\"checkbox\" />";
          var thiscell1 = thisrow.insertCell(1);
          thiscell1.innerHTML = "cell";
          var thiscell2 = thisrow.insertCell(2);
          thiscell2.innerHTML = "cell";
          var thiscell3 = thisrow.insertCell(3);
          thiscell3.innerHTML = "cell";
          var thiscell4 = thisrow.insertCell(4);
          thiscell4.innerHTML = "cell";
          thiscell4.align = "center";
           
        }
        function insert_Cell(){
            var y = table.rows[0].insertCell(0);
            y.colSpan="2";
            y.innerHTML = "sssss";
        }
        function selectall(){
            for(i=0;i<selectBox.length;i++){
                selectBox[i].checked = true;
            }
        }
        function noselect(){
            for(i=0;i<selectBox.length;i++){
                selectBox[i].checked = false;
            }
        }
        function inverse(){
            for(i=0;i<selectBox.length;i++){
                if(selectBox[i].checked){
                    selectBox[i].checked = false;
                }else{
                    selectBox[i].checked = true;
                }
            }
        }
        function delRow(){
            for(i=selectBox.length-1;i>=0;i--){
                //alert(typeof(selectBox[i]));
if(selectBox[i].checked){
                    table.deleteRow(i);
                }
            }
        }
        function onRefresh(){
            location.reload();
        }
        function copyRow(){
            for(i=0;i<selectBox.length;i++){
                if(selectBox[i].checked){
                    //var copytable = document.getElementById("copyTable");
var tablerow = table.insertRow(table.rows.length);
                    tablerow.innerHTML = table.rows[i].innerHTML;
                }
            }
        }
        function tableAlign(){
            for(i=0;i<selectBox.length;i++){
                if(selectBox[i].checked && clicked){
                    table.rows[i].align = "center";
                }
            }
        }
        function changeColor(){
            var skip = true;
            for(i=0;i<tr.length;i++){                
                if(skip){
                    tr[i].bgColor = "#cccccc";
                    skip = false;
                }else{
                    tr[i].bgColor = "#ffffff";
                    skip = true;
                }
            }
        }
 
</script>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。