龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript中实现表格增删实现代码

时间:2012-12-29 08:41来源:未知 作者:admin 点击: 次
分享到：
下面我们结合html与javascript实现动态增加与删除表格行与表格列的程序，有需要的朋友可参考参考。 例1 代码如下 script function addRow(){ // 插入一行 myNewRow = document.all.myTable.insertRow(); var
下面我们结合html与javascript实现动态增加与删除表格行与表格列的程序，有需要的朋友可参考参考。

例1

 代码如下

<script>
function addRow(){
   
    // 插入一行
    myNewRow = document.all.myTable.insertRow();
    var lenRow = document.all.myTable.rows.length; // 计算总行数
   
    if(lenRow > 1){       
        var point = myNewRow.rowIndex;    // 计算当前行位置   
        var lenCol = document.all.myTable.rows(0).cells.length; // 计算每行有几列
       
        // 插入lenCol个td
            for (i=0; i < lenCol; i++) {
                document.all.myTable.rows(point).insertCell();
                document.all.myTable.rows(point).cells(i).innerHTML = parseFloat(document.all.myTable.rows(point-1).cells(i).innerHTML) + lenCol;
        }
    }else if(lenRow == 1){
        // 原来table是0行，初始化一行
        for(i = 0; i < 10; i++){
            document.all.myTable.rows(0).insertCell();
            document.all.myTable.rows(0).cells(i).innerHTML = i;
        }
    }   
}

function delRow(){
    document.all.myTable.deleteRow();
}
</script>
<a href="javascript: addRow()">增加一行</a>
<a href="javascript: delRow()">减去一行</a>
<table name=myTable border=1 id=myTable>
</table>

例2

 代码如下

<HTML>
<TITLE>Form Object example</TITLE>
<HEAD>
<script language="javascript">
function delrow1()
{
var oElement=event.srcElement;
while(oElement.tagName!="TR")
{
oElement=oElement.parentElement;
}
var oTBody=oElement.parentElement;
oTBody.removeChild(oElement)
}

 

function delrow2()//?h除当前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.yltable.deleteRow(currRowIndex);//table10--表格id
}
function insertrow1() //增加的一行方法1
{
var newnode = document.getElementById('yltable').lastChild.cloneNode(true);
document.getElementById('yltable').appendChild(newnode);
}

function insertrow2() //增加的一行方法2
{
newRow=document.all.yltable.insertRow(-1);
var j_1 = document.all.yltable.rows.length;
newcell=newRow.insertCell();
newRow.bgColor='#FFFFFF';
newcell.align='center';
newcell.innerHTML=""+j_1+"";


newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';

newcell.align='center';
newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";


newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}

function inserttable()
{
var newnode = document.getElementById('yltable').cloneNode(true);
document.getElementById('ylform').appendChild(newnode);
}
</script>
</HEAD>
<BODY>
<form name="ylform" id="ylform">
<center>
<input name="button" type="button" onClick="inserttable()" value="增加表格">
<input name="button2" type="button" onClick="insertrow1()" value="增加一行1">

<input name="button22" type="button" onClick="insertrow2()" value="增加一行2">
</center>


<div style="overflow-y:auto; overflow-x:visible;width:85%;height:150px">
<table border="1" align="center" width="50%" id="yltable">
  <TBODY id=yl1>
    <tr>
    <td width="30%" height="22"><div align="center">1</div></td>
    <td width="40%">
    <div align="center">
    <input name="textfield" type="text" value="yl">
    </div></td>
    <td width="30%"><div align="center">
    <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">
    </div></td>
    </tr>
  </TBODY>
  <TBODY id=yl2>
    <tr>
    <td><div align="center">2</div></td>
    <td><div align="center">
    <input name="textfield2" type="text" value="yanleigis">
    </div></td>
    <td><div align="center">
    <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">
    </div></td>
    </tr>
  </TBODY>
  <TBODY id=yl3>
    <tr>
    <td ><div align="center">3</div></td>
    <td ><div align="center">
    <input name="textfield22" type="text" value="Landgis@126.com">
    </div></td>
    <td ><div align="center">
    <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">
    </div></td>
    </tr>
  </TBODY>
</table>
</div>


<center>
</center>
</form>
</BODY>
</HTML>

精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

RANK 侧边栏 男女数量 oct 后代元素 固定ip 指定行 vbs，nableKer 分页语句 Ruby java文件 序列化 手机站IIS 行和列 新浪微博 ext3grep 非const引用 Response.Cha 操作笔记 from stri SQL基础知识 random snprintf函数 getAttribute 注册表键值 dedeampz 静态编译 格式化数字 图书信 广播 播放 instanceof sys模块 python正则匹配 定要 Replica 字符集编码 引用py文件 synchronized opensuse安装 开启80 zip解压 面试 php生成二 基本数据类 数据排序 建立 周一到周末 ln命令 interval 复选框操作 输出时间 UpdateDaset enter事件 XmlPullParse CHTButton 点操作 使用方法 CURLOPT_POST

赞助商链接