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>

使用table自带方法和DOM方法操作HTML table的区别

注:使用createDocumentFragment创建TABLE 行的效率要高 使用table自带方法和DOM方法操作HTML table的区别 table表格的操作有两种方法,...
  • hongweigg
  • hongweigg
  • 2015年01月05日 17:22
  • 1495

DOM 操作表格及样式

学习要点: 1.操作表格 2.操作样式 DOM 在操作生成 HTML 上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱, 导致最终的操作就不是那么简单方便了。本章主要了解一下 DO...
  • zhangleijava1
  • zhangleijava1
  • 2015年07月29日 09:36
  • 1058

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

.html代码如下: 表格单元格对齐 .r1{background:#fba} .r2{background:#ccc} function createTable(row,...
  • yayun0516
  • yayun0516
  • 2014年11月29日 11:56
  • 1658

前端性能优化:DOM操作标签对性能的影响

给DOM添加相同的数量的字符串,到底什么会相应性能呢?测试代码: var length = 300000; function Test1() { var t = [length...
  • xuexiaodong2009
  • xuexiaodong2009
  • 2016年08月01日 09:26
  • 1682

DOM操作,javascript动态生成表格

javascript动态生成表格,主要是利用DOM创建节点。 所利用到的函数主要有以下三个: document.createElement() document.gerElementByTagNam...
  • yy211zhu
  • yy211zhu
  • 2016年03月30日 21:01
  • 511

JavaScript DOM操作之表格操作(3)

/** *DOM操作表格--(搜索) *toLowerCase()转为小写 *search返回匹配元素的位置,没有的返回-1 *split()将字符串拆分为数组 */ HT...
  • u014661569
  • u014661569
  • 2015年05月22日 08:41
  • 442

利用Jquery对动态元素进行操作

今天写了一点jquery的代码,姑且先存放的博客上吧。  默认样式是这样的,需要的是click其中的td时实现对其内容的修改,而blur后显示的是修改后的内容:        ...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月09日 19:20
  • 1499

HTML之动态加载表格数据

New Document                 *{        margin:0px;        padding:0px;     }     body table{ ...
  • worn_xiao
  • worn_xiao
  • 2016年09月17日 09:14
  • 5399

A DOM高级 04 表格添加行

ID         姓名         操作                         1         大卡                    ...
  • u014071104
  • u014071104
  • 2015年05月27日 09:06
  • 995

JavaScript DOM操作表格及样式

一.操作表格 标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table 人员表 姓名 性别 年龄 ...
  • tanggao1314
  • tanggao1314
  • 2015年07月20日 12:39
  • 879
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML DOM对表格数据的动态操作
举报原因:
原因补充:

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