HTML DOM对表格数据的动态操作

原创 2012年03月30日 11:45:20

以下为正文内容,功能主要实现在一个页面中完成对数据的增、删、改、查操作。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="check.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>表格操作</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 
 <script type="text/javascript" language="javascript" src="js/util.js"></script>
 <script type="text/javascript">
    //row操作行 cell操作单元格
    function tbtest(){
        //获得指定表格的所有单元格
        var cells=$("tb").cells;
        alert("单元格总个数:"+cells.length);
        var rows=$("tb").rows;
        alert("行数"+rows.length);
        /*for(var i=0;i<row.length;i++){
            var cells=rows[i];
        }*/
        //alert("第一行第一列的值是:"+(rows[0].cells)[0].innerHTML);
        alert("第一行第一列的值是:"+(rows[0].cells)[0].innerText);
     }

     var index=0;
     //增加一行
     function addRow(){
         try{
            var tb=$("tb");
            //原表格行数
            var len=tb.rows.length;
            index=len;
            //防止删除之后 索引号不连续
            //if(len>=index){
                //index=len;
            //}
            //alert(len);
            //tb.insertRow(0) 返回一个TableRow对象
            //0表示表格第一行 合起来 在表格第一行加入一条数据
            var tableRow=tb.insertRow(len);
            //以下方法可以给新增的表格加入新的内容
            //x表示第一行中的第一列
            var x=tableRow.insertCell(0);
            //y表示第一行中的第一列
            var y=tableRow.insertCell(1);
            //z表示功能列"删除"
            var z=tableRow.insertCell(2);
            x.innerHTML=index;
            var filmName=$("filmname").value;
            //影片名称动态加载
            y.innerHTML=filmName;
            z.innerHTML="<a href='#' onclick='del(this)'>删除</a>"+"&nbsp;&nbsp;"+
            "<a href='#' onclick='update(this)'>修改</a>";
            $("filmname").value="";
         }catch(errMsg){
            alert(errMsg.message);
         }        
     }
    
     //删除单元格
     function del(r){
        try{
            //var tb=$("tb");
            //tb.deleteRow(-1)
            //alert(r.parentNode.parentNode.nodeName);
            //alert(r.parentNode.parentNode.innerText);
            //alert(r.parentNode.parentNode.innerHTML);
            var i=r.parentNode.parentNode.rowIndex;
            //索引号从0开始
            //alert("索引号:"+i);
            tb.deleteRow(i);
            //alert(index);
            //index=index+1;
        }catch(errMsg){
           alert(errMsg.message);
        }
     }
    
     //定义一个全局的row(行级)变量
     var row=null;
    
     function up(){
       try{
           var fileName=$("filmname").value;
           //alert(row.parentNode.parentNode.cells[1].innerText);
           row.parentNode.parentNode.cells[1].innerHTML=fileName;
           //更新完毕后 将按钮上的字修改成"添加影片" 并重新给按钮
           //添加事件
           $("btoper").value="增加影片";
           $("btoper").onclick=addRow;
           $("filmname").value="";
           alert("修改完成");
       }catch(errMsg){
          alert("修改失败,错误原因是:"+errMsg.message);
       }
     }
    
     function update(r){
        //alert(r.parentNode.parentNode.nodeName);
        //alert((r.parentNode.parentNode.cells)[1].innerText);
        try{
          //var txtContent=(r.parentNode.parentNode.cells)[1].innerText;
          //contentText
          var txtContent=(r.parentNode.parentNode.cells)[1].innerHTML;
          alert("文本内容"+txtContent);
          $("filmname").value=txtContent;
          $("btoper").value="修改影片";
          $("btoper").onclick=up;
          row=r;
        }catch(errMsg){
           alert("异常信息:"+errMsg.message);
        }
     }
 </script>
 
  </head>
  <body>
    <table id="tb">
      <tr id="tr1">
        <td>编号</td>
        <td>影片名称</td>
        <td>操作</td>
      </tr>
    </table>
   
    <br>
    增加影片
    <hr>
    <form action="" name="filmform" id="filmform" method="post">
        影片名称:<input type="text" name="filmname" id="filmname"/>
       <br>     
       <input type="button" value="添加影片" onclick="addRow();" id="btoper" name="btoper">
    </form>
   
   
    <br>
    <input type="button" value="表格DOM操作" onclick="tbtest();">
   
  </body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS操作DOM 使用表格动态展示数据

公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示我知道有一些插件可以做,但问题是我找的那个插件发现动态更新数据时IE内存一直累积,最后会造成崩溃现象使用别人的插件说起来是效果好一...

24、DOM的高级应用1-------表格的动态删除和添加行的操作

1、DOM的高级应用1-------表格的动态删除和添加行的操作 2、注意oTab.tBodies[0].rows[0].cells[1].innerHTML的使用形式 3、代码的实现 ...

html中后台动态绑定数据表格存在空白单元格问题

因为要做一个客户管理系统,在设置表格的时候在表格样式的时候,因为对table标签的相关属性不是很了解,出现一些小的波折 先记录下这个比较好看的table样式 #mytable { pad...

07-DOM操作表格

  • 2013-03-06 18:11
  • 34.22MB
  • 下载

JS@DOM:向表格中动态添加行显示信息,做到滚动效果

最近在学习D3,很多时候都用到了表格,并且在js中动态地添加和删除表格,在这里总结一下js关于表格的操作: 首先要知道,js中没有提供关于列的操作,所以关于列的操作只能通过操作行来实现,比如获得列的数...

JS DOM 表格操作

DOM表格操作

dom动态修改表格

(X)HTML Table Inspector Test Table Product ...

在JavaScript中使用DOM技术动态控制表格 .

相对于IE提供的对表格的insertCell、insertRow等方法,使用DOM显得可移植更好一些 下面的例子中,是一个3*2的表格,按下按钮后,删除第二行,然后再插入一个新行,该代码在IE6...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)