posts - 0,  comments - 1,  trackbacks - 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- @author Xian Tarena -->
<!-- @creation date 2008-12-28 -->
<!-- @last modification date 2009-01-18 -->
<!--
 @comment
 此页面为使用js配合dhtml动态增加和删除行并修改行中的信息
 如果要真正实现增删改查功能,及与数据库中的数据保持一致
 必须要配合ajax来完成
 暂不要求完成
-->
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
 var count = 2;
 //增加商品方法
 function addProduct() {
  var ptab = document.getElementById("productTable");
  var curRow = ptab.insertRow(-1);
  var curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = count++;
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text' size='5'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text' size='5'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='button' value='保存' onclick='saveProduct(this)'/><input type='button' value='删除' onclick='deleteProduct(this)'/>";
  delete ptab, curRow, curCell;
 }
 
 //保存商品方法
 //将值从每个input中拿出来再放入td中
 function saveProduct(obj) {
  //obj为保存按钮对象
  //obj.parentNode 为保存按钮所在td对象
  //obj.parentNode.parentNode 为td对象所在的tr对象
  var curRow = obj.parentNode.parentNode;
  //alert(curRow.cells.length);
  //因为第0列和最后一列不是input对象
  //所以循环从1至curRow.cells.length-1
  for (var i=1; i<curRow.cells.length-1; i++) {
   //alert(curRow.cells[i].childNodes[0].outerHTML);
   //curRow.cells[i].innerHTML表示当前td的内容
   //curRow.cells[i].childNodes[0].value
   //表示当前td的第一个子节点(即input对象)的value
   curRow.cells[i].innerHTML = curRow.cells[i].childNodes[0].value;
  }
  //原本obj上的onclick事件为保存事件(addProduct)
  //先改成修改事件(updateProduct)
  //因为事件本身调用的是一个方法
  //所以在修改控件事件时使用一个匿名方法
  //不能写成 obj.onclick= updateProduct(this);
  obj.onclick= function anonymous () {updateProduct(this);};
  //原本按钮的value为保存
  obj.value="修改";
  delete curRow;
 }

 function updateProduct(obj) {
  var curRow = obj.parentNode.parentNode;
  //alert(curRow.cells.length);
  curRow.cells[1].innerHTML = "<input type='text' value='"+curRow.cells[1].innerHTML +"'/>";
  curRow.cells[2].innerHTML = "<input type='text' size='5' value='"+curRow.cells[2].innerHTML +"'/>";
  curRow.cells[3].innerHTML = "<input type='text' size='5' value='"+curRow.cells[3].innerHTML +"'/>";
  curRow.cells[4].innerHTML = "<input type='text' value='"+curRow.cells[4].innerHTML +"'/>";
  obj.onclick= function anonymous() {saveProduct(this);};
  obj.value="保存";
  delete curRow;
 }

 function deleteProduct(obj) {
  var ptab = document.getElementById("productTable");
  ptab.deleteRow(obj.parentNode.parentNode.rowIndex);
  repaintNumber();
  delete ptab;
 }

 function repaintNumber() {
  var ptab = document.getElementById("productTable");
  var i = 1;
  for (; i<ptab.rows.length; i++) {
   ptab.rows[i].cells[0].innerHTML = i;
  }
  count = i;
 }
</script>
</HEAD>

<BODY>
 <table id="productTable" align="center" width="50%" border="1">
  <caption align="center"><b>商品入库</b></caption>
  <thead>
   <tr>
    <th width="10%">序号</th>
    <th width="30%">商品名称</th>
    <th width="10%">价格</th>
    <th width="10%">数量</th>
    <th width="30%">产地</th>
    <th width="10%"><input type="button" value="增加" onclick="addProduct()"/></th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td align="center">1</td>
    <td align="center">电脑</td>
    <td align="center">10000</td>
    <td align="center">10</td>
    <td align="center">上海</td>
    <td align="center"><input type="button" value="修改" onclick='updateProduct(this)'/><input type="button" value="删除" onclick='deleteProduct(this)'/></td>
   </tr>
  </tbody>
 </table>
</BODY>
</HTML>








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- @author Xian Tarena -->
<!-- @creation date 2008-12-27 -->
<!-- @last modification date 2009-01-18 -->
<!--
 @comment
 此页面为使用js配合dhtml动态增加和删除行
 也可要求学生完成
 此页面提交至servlet后,使用jdbc中的批处理功能将页面中的数据保存至数据库
-->
<HTML>
<HEAD>
<TITLE> 商品入库 </TITLE>
<script language="javascript">
 //计数变量
 var count = 2;

 //新增行方法
 function addProduct() {
  //得到table对象
  var ptab = document.getElementById("productTable");
  //调用table对象的插入行方法,-1代表在插入行的位置为最后,
  //该方法返回一个tr对象
  var curRow = ptab.insertRow(-1);
  //调用tr对象的插入单元格方法,-1代表在插入单元格的位置为最后,
  //该方法返回一个td对象
  var curCell = curRow.insertCell(-1);
  //设置该td的对齐方式为居中
  curCell.align = 'center';
  //使用innerHTML属性设置该td的内容
  curCell.innerHTML = count++;
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text' size='5'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text' size='5'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='text'/>";
  curCell = curRow.insertCell(-1);
  curCell.align = 'center';
  curCell.innerHTML = "<input type='button' value='删除' onclick='deleteProduct(this)'/>";
  //删除创建的对象(必要,使创建的对象失去引用而被垃圾回收)
  delete ptab, curRow, curCell;
 }

 //删除行方法
 function deleteProduct(obj) {
  //obj为删除按钮对象
  //得到table对象
  var ptab = document.getElementById("productTable");
  //调用table对象的删除行方法,该方法的参数为被删除行在table中的索引位置
  //obj.parentNode表示删除按钮的父节点,即删除按钮所在的td
  //obj.parentNode.parentNode表示删除按钮所在的td的父节点,即td所在的tr
  //每一个tr都有rowIndex属性,表示该行在table中的索引位置
  ptab.deleteRow(obj.parentNode.parentNode.rowIndex);
  repaintNumber();
  delete ptab;
 }
 //重新绘制序号列,由于删除行的时候会导致行序列不连续
 //使用此方法解决该问题
 function repaintNumber() {
  var ptab = document.getElementById("productTable");
  var i = 1;
  for (; i<ptab.rows.length; i++) {
   //每个table对象都有一个rows集合,存放着该table中所有的tr对象
   //ptab.rows[i]返回的是下标为i的tr对象
   //每个tr对象都有一个cells集合,存放着该tr中所有的td对象
   //ptab.rows[i].cells[0]返回的是第i行0列的td对象
   ptab.rows[i].cells[0].innerHTML = i;
  }
  count = i;
 }
</script>
</HEAD>
<BODY>
 <form action="" method="post">
 <table id="productTable" align="center" width="50%" border="1">
  <caption align="center"><b>商品入库</b></caption>
   <tr>
    <th width="10%">序号</th>
    <th width="30%">商品名称</th>
    <th width="10%">价格</th>
    <th width="10%">数量</th>
    <th width="30%">产地</th>
    <th width="10%"><input type="button" value="增加" onclick="addProduct()"/></th>
   </tr>
  <tbody>
   <tr>
    <td align="center">1</td>
    <td align="center"><input type="text"/></td>
    <td align="center"><input type="text" size="5"/></td>
    <td align="center"><input type="text" size="5"/></td>
    <td align="center"><input type="text"/></td>
    <td align="center"><input type="button" value="删除" onclick='deleteProduct(this)'/></td>
   </tr>
  </tbody>
 </table>
 <table align="center" width="50%">
  <tr>
   <td align="center">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
   </td>
  </tr>
 </table>
 </form>
</BODY>
</HTML>



删除行、新增行

<html>
  <head>
    <title></title>
    <meta content="text/html;charset=utf-8">
    <script language="JavaScript">
       <!--
   var count =1;
   var idIndex = 1;
   function addRows(){
  var table = document.getElementById("tableTest");
  var row = table.insertRow(-1);
  var cell = row.insertCell(-1);
  cell.align = 'center';
  cell.innerHTML = count++;
  var cell = row.insertCell(-1);
  cell.align = 'center';
  cell.innerHTML = "<input type='text' id='"+(idIndex++)+"'/>";
  var cell = row.insertCell(-1);
  cell.align = 'center';
  cell.innerHTML = "<input type='text' id='"+(idIndex++)+"'/>";
  var cell = row.insertCell(-1);
  cell.align = 'center';
  cell.innerHTML = "<input type='text' id='"+(idIndex++)+"'/>";
  var cell = row.insertCell(-1);
  cell.align = 'center'; 
  cell.innerHTML = "<input type='button' value='删除' onclick='delRows(this)' />" 
  delete table,cell,row;
   }

   function delRows(obj){
  var table = document.getElementById("tableTest");
  table.deleteRow(obj.parentNode.parentNode.rowIndex);
  repeatNumber();
  delete table;
   }

   function repeatNumber(){
  var table = document.getElementById("tableTest");
  var i=1;
  for(;i<table.rows.length;i++){
   table.rows[i].cells[0].innerHTML=i;
  }
  count = i;
  delete table;
   }

   function submitMethod(){
  var table = document.getElementById("tableTest");
  var i=1;idIndex--;
  for(;i<=table.rows.length;i++){
   //alert(table.rows.length);
   var j = 1;
   for(;j<table.rows[i].cells.length;j++,idIndex--){
    alert(idIndex);
    table.rows[i].cells[j].innerHTML=document.getElementById(idIndex).value;
   }
  }
   }
     -->
    </script>
    <style></style>
  </head>
  <body>
 <table id="tableTest" align="center" border="2" width="50%">
   <tr>
  <th>序号</th>
  <th>姓名</th>
  <th>性别</th>
  <th>成绩</th>
  <th><input type="button" value="增加" onclick="addRows()" /></th>
   </tr>
 </table>
 <center>
  <input type="button" value="提交" onclick="submitMethod()" />
  <input type="reset" value="重置" />
 
 </center>
  </body>
</html>






使用javascript DOM模型 创建table  2行2列
a.写出新增和删除行方法
b.写出修改列内容的方法
c.对表格进行排序

答案:


var mytab = null;
 function createTab(){
        mytab = document.createElement("table");
        mytab.border = "1px";
        document.body.appendChild(mytab);
        var mytr = mytab.insertRow();
        var mytd = mytr.insertCell();
        mytd.innerText="c";
        mytd = mytr.insertCell();
        mytd.innerText="b";

        mytr = mytab.insertRow();
        mytd = mytr.insertCell();
        mytd.innerText="a";
        mytd = mytr.insertCell();
        mytd.innerText="d";
       
        //insertTR(1);
        //deleteTR(1);
        //updateCell(1,1,"xx");
        //排序0列
        //sortTable(0);
    }
    //新增行方法
 function insertTR(rowIdx){
        window.mytab.insertRow(rowIdx);
    }
    //删除行方法
 function deleteTR(rowIdx){
        window.mytab.deleteRow(rowIdx);
    }
    //更新列内容
 function updateCell(rowIdx,colIdx,content){
        window.mytab.rows[rowIdx].cells[colIdx].innerText = content;
    }
    //表格排序
 function sortTable(colIdx){
        var colDataRows = mytab.rows;
        var allTrs = new Array;

        for(var i=0; i<colDataRows.length; i++){
            allTrs.push(colDataRows[i]);
        }

        allTrs.sort(genrateCompare(colIdx));
       
        var o = document.createDocumentFragment();
        for ( var i=0; i<allTrs.length; i++){
            o.appendChild(allTrs[i]);
        }
        mytab.tBodies[0].appendChild(o);
    }

    function genrateCompare(colIdx){
        return function compareTRs(tr1,tr2){
            var value1 = tr1.cells[colIdx].innerText;
            var value2 = tr2.cells[colIdx].innerText;
            return value1.localeCompare(value2);
        };
    }

posted on 2009-04-19 02:23 雨飞 阅读(143) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航:
 

<2025年7月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

留言簿

文章档案

搜索

  •  

最新评论