关于JS添加table行和删除行的问题

function insertRows(){

var tempRow=0;

var tbl=document.getElementById("dictTbl");

tempRow=tbl.rows.length; //获取当前table的行数

//alert(tempRow);

var Rows=tbl.rows;//类似数组的Rows

var newRow=tbl.insertRow(tbl.rows.length);//插入新的一行

//alert(tbl.rows.length);

var Cells=newRow.cells;//类似数组的Cells

for (i=0;i<3;i++)//每行的3列数据

{

//alert(newRow.rowIndex + "   " + Cells.length);

var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);

newCell.align="center";

switch (i)

{

case 0 : newCell.innerHTML="<td class=\"ta_01\" align=\"center\"  width=\"15%\">"+tempRow+"</td>";break;

case 1 : newCell.innerHTML="<td class=\"ta_01\" align=\"center\"  width=\"60%\"><input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25></td>";break;

case 2 : newCell.innerHTML="<td class=\"ta_01\" align=\"center\"  width=\"25%\"><a href=‘javascript:delTableRow(\""+tempRow+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a></td>";break;

}

}

}

function delTableRow(rowNum){

var tbl=document.getElementById("dictTbl");

//alert(rowNum);

//alert(tbl.rows.length);

if (tbl.rows.length >rowNum){

tbl.deleteRow(rowNum);

//alert(rowNum);

//alert(tbl.rows.length);

for (i=rowNum;i<tbl.rows.length;i++)

{

tbl.rows[i].cells[0].innerText=i;

tbl.rows[i].cells[2].innerHTML="<a href=‘javascript:delTableRow(\""+i+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";

}

}

}

时间: 2024-12-29 10:55:51

关于JS添加table行和删除行的问题的相关文章

js在table指定tr行上或底下添加tr行

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置             var newTd1 = newTr.insertCell();             newTd1.

miniUI 动态添加table - JS

1.效果展示 ↓ 2.具体代码 1 <script type="text/javascript"> 2 function addRow() { 3 var form = document.getElementById("addForm"); 4 var table = document.getElementById("table_Records"); 5 var id_com = form.getElementsByTagName(&

js在table中添加tbody块,方便整块的添加和删除

利用js在table中添加tbody块,方便整块的添加和删除,以下为添加. <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> </table> <script language="javascript"> var value = "内容&quo

电力项目十七--数据字典首页JS添加和删除表格

知识点:jQuery是一个JavaScript函数库. JS代码: function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = $("#dictTbl tr").size();//获取表格的行数 var $tdNum = $("<td align='center'></td>"); $tdNum.html(tempRow); var $tdN

js 动态增加行删除行

1 <body> 2 <table id="tableID" border="1" align="center" width="60%"> 3 <tr> 4 <th>用户名</th> 5 <th>邮箱</th> 6 <th>操作</th> 7 </tr> 8 <tbody id="tbodyI

用JS添加文本框案例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js 克隆行、删除行

js 克隆行.删除行 前言 现在项目中,由于本人负责的模块为:"资源目录" ,功能清单如下,而此篇文章的功能描述在于"在线编目"里面实现中.业务和整体的实现逻辑就不多说了,挺多的!这里只是围绕具体的增加.删除行剖析即可. --------功能列表-------- 资源目录管理 资源目录管理-在线编目 资源目录管理-资源审核 资源目录管理-资源目录检索 资源目录共享 资源目录共享-资源申请 资源目录共享-资源审核 资源目录共享-资源获取 功能实现 实现的jsp代码:

第十三篇 JS 操作table表格

JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然是真的了对吧,那么1=2呢,那就是假的,因为正常情况下,1不可能等于2,1就是1.那么我们在JS里写一个: var a=1; if(a=1){ alert('正确'); }else{ alert('错的'); } 给一个变量,来做判断,大家记住,if也有它的规则,先一个if,圆括号做判断,随后一个花

js添加的表单在火狐下获取不到数据的解决方法

相信很多朋友在进行网页制作的时候都会遇到过这样的问题:就是用js在表单内添加数据控件之后:在火狐下获取不到数据的问题. 前几天,我在开发一个使用js添加数据填写项的时候,也出现了这样的问题:一开始我还以为是火狐下ajax加载数据出了问题(因为在ie下可以正常的获取到数据):经过测试原来并是这样的问题,而是form放得位置不同, 在form和table结合使用的时候,很多朋友都喜欢这样放: <table>                <form>