JS 操作表格2

jeelee

浏览: 637625 次
性别:
来自: 深圳

最近访客更多访客>>

hh_qq_love_hi

一个java程序员

wolaiyeshuai

BlueAeri

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html&css&javascript

HTML

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 表格操作 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>

</body>
<script language="javascript">
//添加表格

function loadTable()
{
    var tb = document.createElement("table");
    var rowTitle = tb.insertRow();
    var cellTitle1= rowTitle.insertCell();
    var cellTitle2= rowTitle.insertCell();
     cellTitle2.colSpan = 2;
     cellTitle2.align = "right";
     cellTitle2.innerHTML = "<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>";
     cellTitle1.innerHTML = "<span>添加</span>";
     loadSelect(cellTitle1);

    for(var i = 0; i < 10; i++){
        var row = tb.insertRow();//添加行

         loadCells(row, i);
    }
    //设置属性

     tb.id = "tb";
     tb.align="center";
     tb.cellPadding = 1;
     tb.bgColor="#ffffee";
     tb.style.borderWidth = "1px";
     tb.style.borderCollapse = "collapse";
     tb.style.borderStyle = "solid";
     tb.rules = "ALL";//应用全部

     tb.borderColor = "#000000";
    document.body.appendChild(tb);
}
//添加单元格

function loadCells(rowObj,m)
{
    var cell1 = rowObj.insertCell();//添加单元格

    var cell2 = rowObj.insertCell();//添加第二个单元格

    var cell3 = rowObj.insertCell();

     cell1.innerHTML = " " + parseInt(m + 1) + " ";
     cell2.innerHTML = "<input type='text' name='txt_name' value=''>";
     cell3.innerHTML = "<span style='cursor:hand;' onclick='delRow(this)'> × </span>";
}
//添加select框

function loadSelect(obj)
{
    var s = document.createElement("select");
     s.id = "sel_count";
     ss.name = s.id;
    for(var i = 1; i <= 10; i++){
        var opt = new Option(i+"行",i);
         s.options.add(opt);
    }
     obj.appendChild(s);
}
//删除行

function delRow(obj)
{
    var tr = obj.parentElement.parentElement;
    var tb = tr.parentElement.parentElement;//table标签和tr标签隐式存在一个tbody


     tb.deleteRow(tr.rowIndex);
}
//选择好的个数的行，传入单元格

function addRow(obj)
{
    var tr = obj.parentElement;
    var cnt = (tr.cells[0]).children[1].value;//个数

    var tb = tr.parentElement.parentElement;

    var lastRow = tb.rows[tb.rows.length - 1];//获得当前最后一行

    var maxIndex= parseInt(lastRow.cells[0].innerText);//获得当前表格中显示的最好编号


    for(var i = 0; i < cnt; i++){
        var newRow = tb.insertRow();
         loadCells(newRow,parseInt(maxIndex + i));
    }

}

loadTable();
</script>
</html>

分享到：

Ext中tabPanel加载页面总结 | JS 操作表格1

2010-09-30 21:31
浏览 1511
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论