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内存一直累积,最后会造成崩溃现象 使用别人的插件说起来是...

DOM-动态创建表格和动态添加下拉列表框实例

.html代码如下: 表格单元格对齐 .r1{background:#fba} .r2{background:#ccc} function createTable(row,...

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

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

DOM操作HTML文档;js创建表格;清除空文本节点

DOM 定义了访问和操作 HTML 文档的标准方法。 1、DOM访问节点 document.documentElement:返回HTML根元素  var ohtml = document.docum...

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

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

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

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

js 操作 ftl 页面中的动态表格数据

$(document).on("click", '#ButtonList1_btnSaveDraft', function () { var detailList = new Arra...

jqgrid 的一些操作 动态增加列 用本地 数据 修改表格

1 jqGrid动态增加列,     目前还没有这样的方法 只能先卸载Grid再进行重绘,才能达到改变列的目的。     Java代码   ...

抓取微博热词,使用simple_html_dom来操作html数据

一直以来使用php解析html文档树都是一个难题。Simple HTML DOM parser 很好地解决了这个问题。可以通过这个php类来解析html文档,对其中的html元素进行操作 (PHP5+...
  • ldb2741
  • ldb2741
  • 2014年02月17日 17:14
  • 1260

使用JavaScript和DOM动态创建表格

  • 2007年10月19日 14:52
  • 136KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML DOM对表格数据的动态操作
举报原因:
原因补充:

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