javascript对table的添加，删除行的操作

<body>

            <form name="myForm">

                <table width="100%" id="tab" name="tab" border="0px" style="text-align:center;">

                    <tr style="background-color:0099FF;color:black;">

                        <td>选择</td>

                        <td>编号</td>

                        <td>姓名</td>

                        <td>年龄</td>

                        <td>地址</td>

                        <td>操作</td>

                        <td>操作</td>

                    </tr>

                    <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">

                        <td><input type='hidden'><input type="checkbox" value="11"/></td>

                        <td>100</td>

                        <td>张三</td>

                        <td>15</td>

                        <td>湖南株洲</td>

                        <td><a href="#" onclick="addRow()">添加</a></td>

                        <td><a href="#" onclick="deleteRow(this)">删除</a></td>

                    </tr>

                    <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">

                        <td><input type="checkbox" value="22"/></td>

                        <td>101</td>

                        <td>李四</td>

                        <td>15</td>

                        <td>湖南长沙</td>

                        <td><a href="#" onclick="addRow()">添加</a></td>

                        <td><a href="#" onclick="deleteRow(this)">删除</a></td>

                    </tr>

                    <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">

                        <td><input type="checkbox" value="33"/></td>

                        <td>102</td>

                        <td>王五</td>

                        <td>15</td>

                        <td>湖南湘潭</td>

                        <td><a href="#" onclick="addRow()">添加</a></td>

                        <td><a href="#" onclick="deleteRow(this)">删除</a></td>

                    </tr>

                </table>

            </form>

    </body>

以下是使用javascript对表格的添加行,删除行,进行操作..

具体代码如下:

style样式代码:

<style>

      .displayStyle{

             background-color:00FFFF;

         }    

         .hideStyle{

             background-color:#FFFFF;

         }

         .onClickStyle{

             background-color:00FF00;

         }

         a{

             color:red;

         }

         a:hover{

             color:green;

         }

</style>

javascript代码:

<script>

var selectRow=null;

//单击时,改变样式;

function onClickChangeStyle(obj){

       //获取表格对象;

       var tab = document.getElementById("tab");

         //获取当前行选择下标;

         var currentRowIndex = obj.rowIndex;

         //获取表格所有行数;

       var tablRows = tab.rows.length;

       //获取表格第一行,第一列的值;

       //var firstCellValue = tab.rows[0].cells[0].innerHTML;

       //获取表格的第一行，第一列的第一个元素的值;

       //var firstChildValue = tab.rows[0].cells[0].firstChild.value;

       //循环表格的所有行;并且选择的当前行，改变背景颜色；

       for(var i = 1;i<tablRows;i=i+1){

               if(currentRowIndex == i){

                     //为选中的当前，设置css样式;

                     selectRow  = tab.rows[i];

                     tab.rows[i].className= "onClickStyle";

               }else{

                     //把没有选中的行的背景样式设置为白色;

                       tab.rows[i].className= "hideStyle";

               }

       }

}

//鼠标移入时，改变颜色;

function onmouseOverMethod(selectThis){

      selectThis.className="displayStyle";

      if(selectRow==selectThis){

              selectThis.className="onClickStyle";

      }

}

//鼠标移除时，改变背景颜色;

function onmouseOutMethod(selectThis){

     selectThis.className="hideStyle";

     if(selectRow == selectThis){

          selectThis.className="onClickStyle";

    }

}

//添加行;

function addRow(){

        var tab = document.getElementById('tab');

      var rowIndex = tab.rows.length+1;

      //添加一行;

        var tr  = tab.insertRow();

        tr.onmouseover = tr.className="displayStyle" ;

        tr.onmouseout = tr.className="hideStyle" ;

        tr.onclick=function (){this.className="onClickChangeStyle(this)";}

        var td1 = tr.insertCell();

        var td2 = tr.insertCell();

        var td3 = tr.insertCell();

        var td4 = tr.insertCell();

        var td5 = tr.insertCell();

        var td6 = tr.insertCell();

        var td7 = tr.insertCell();

        td1.innerHTML = "<input type='hidden'/><input type='checkbox' value = '1'>";

        td2.innerHTML = ""+rowIndex;

        td3.innerHTML = "测试";

        td4.innerHTML = "22";

        td5.innerHTML = "无地址";

        td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";

        td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";

        //初始化行;

        initRows(tab);

}

//初始化行,设置序列号;

function initRows(tab){

     var tabRows = tab.rows.length;

     for(var i = 0;i<tabRows.length;i++){

             tab.rows[i].cells[0].firstChild.value=i;

    }

}

//删除行;(obj代表连接对象)

function deleteRow(obj){

    var tab = document.getElementById('tab');

    //获取tr对象;

    var tr = obj.parentNode.parentNode;

    if(tab.rows.length>2){

        //tr.parentNode，指的是，table对象;移除子节点;

        tr.parentNode.removeChild(tr);

    }

    //重新生成行号;

    initRows(document.getElementById('tab'));

}

</script>    &nbsp;&nbsp;

巴特西

javascript对table的添加，删除行的操作

最新文章

热门文章