动态生成表格 - 雨飞

动态生成表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">




<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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">




<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;
   }

使用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 雨飞阅读(144) 评论(0) 编辑收藏

留言簿

文章档案

搜索

最新评论


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




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理