hc学习平台

 找回密码
 立即注册
搜索
热搜: 活动 交友 javakc
 › 学习交流 › JavaScript › 使用JavaScript脚本函数,向表格table中插入行,删除行
查看: 1545|回复: 1
打印 上一主题 下一主题

使用JavaScript脚本函数,向表格table中插入行,删除行

[复制链接]

2249

主题

0

帖子

0

博客

admin

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

跳转到指定楼层
楼主
发表于2014-10-04 10:16:10 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1181

帖子

2

博客

yjz123456

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-21 20:11:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

function addRow(){

    var tr=document.getElementById("tab");

    var rowIndex=tab.row.length_1;

    var tr =tab.insertRow;

}

function deleteRow(o){

    var tab=document.getElementById("tab");

    var tr=o.parentNode.parentNode;

    if(tab.rows.length>2){

        tr.parentNode.removeChild(tr);

    }

    //重新生成行号

    initRows(document.getElementBuId("tab"));

}

沙发
发表于2016-09-05 19:40:30 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script src="http://code.jwuery.com/jquery-1.11.0.min.js"></script>
<script>
//创建一个HTML元素
function $c(tagname){
   return document.createElement(tagname);
}
//文档加载完成后要执行的内容
$(document).ready(function(){
//绑定添加行按钮的单击事件
$("#addrow").bind("click",function(){
//取得table
var tr=$("#tab");
//创建tr元素
var tr=c("#tr");
//为table追加tr元素
tab.append(tr);
//创建td元素
var td1=$c("#td");
//td元素的内容
td1.innerHTML="insert1";
//为新追加的tr追加td元素
tr.appengChild(td1);
var td2=$c("#td");
tr.appengChild(td2);
});
//绑定删除行按钮的单击事件
$("#deleterow").bind("click",function(){
//取得table的第一行
var tab=("#tab tr:eq(0)");
//删除行
tab.remove();
});
});
</script>
<form>
<table  border=1 width=100 cellspacing=0>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
</table>
<input type="button" value="button" id="addrow">添加行
<input type="button" value="button" id="deleterow">删除行
</form>

0

主题

1576

帖子

0

博客

liufangyuan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-08 19:14:24 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script src="http://code.jwuery.com/jquery-1.11.0.min.js"></script>
<script>
//创建一个HTML元素
function $c(tagname){
   return document.createElement(tagname);
}
//文档加载完成后要执行的内容
$(document).ready(function(){
//绑定添加行按钮的单击事件
$("#addrow").bind("click",function(){
//取得table
var tr=$("#tab");
//创建tr元素
var tr=c("#tr");
//为table追加tr元素
tab.append(tr);
//创建td元素
var td1=$c("#td");
//td元素的内容
td1.innerHTML="insert1";
//为新追加的tr追加td元素
tr.appengChild(td1);
var td2=$c("#td");
tr.appengChild(td2);
});
//绑定删除行按钮的单击事件
$("#deleterow").bind("click",function(){
//取得table的第一行
var tab=("#tab tr:eq(0)");
//删除行
tab.remove();
});
});
</script>
<form>
<table  border=1 width=100 cellspacing=0>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
</table>
<input type="button" value="button" id="addrow">添加行
<input type="button" value="button" id="deleterow">删除行
</form>

0

主题

1700

帖子

0

博客

song

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-06 12:56:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

//添加行

function addTable(){

//获得表格

var tab=document.getElementById("viewTabs");

//表格的列数

var clos=tab.row.item(0).cells.length;

//表格当前的行数

var num=document.getElementById("viewTabs").rows.length;

var roenum=num;

tab.insertRow(rownum);

for(var i=0;i<4;i++ ){

//查入列

tab.rows[rownum].innertCell(i);

if(i==0){

tab.rows[rownum]. cells[i].innerHTML='<input name="productName" type="text">';

}else if(i==1){

tab.rows[rownum]. cells[i].innerHTML='<input name="quantity" type="text">';

}else if(i==2){

tab.rows[rownum]. cells[i].innerHTML='<input name="weight" type="text">';

}

}

}


//删除行

function delRow(obj){

var Row=obj.parentNode;

var Row=obj.parentNode;

while(Row.tagName.toLowerCase()!="tr")

Row=Row.parentNode;

{

Row.parentNode.removeChild(Row);

}

}

0

主题

1510

帖子

0

博客

zhangjialong

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-07 15:52:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script>
 //添加行
function addTable(){
    //获得表格
    var tab=document.getElementById("viewTabs");
    //表格的列数
    var clos=tab.row.item(0).cells.length;
    //表格当前的行数
    var num=document.getElementById("viewTabs").rows.length;
    var roenum=num;
    tab.insertRow(rownum);
    
    for(var i=0;i<4;i++ ){
        //插入列
        tab.rows[rownum].innertCell(i);
        if(i==0){
            tab.rows[rownum]. cells[i].innerHTML='<input name="productName" type="text">';
        }else if(i==1){
            tab.rows[rownum]. cells[i].innerHTML='<input name="quantity" type="text">';
        }else if(i==2){
            tab.rows[rownum]. cells[i].innerHTML='<input name="weight" type="text">';
        }
    }
}


//删除行
function delRow(obj){
    var Row=obj.parentNode;
    var Row=obj.parentNode;
    while(Row.tagName.toLowerCase()!="tr")
    Row=Row.parentNode;
    
    Row.parentNode.removeChild(Row);
    
}
</script>

0

主题

1518

帖子

0

博客

Cracia

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-07 17:10:37 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

插入行:

<table>

     <tr><td></td></tr>

     <tr><td></td></tr>

     <tr><td></td></tr>

</table>


删除行

<table>

     <tr rows="2"></tr>

     <tr><td></td></tr>

</table>

0

主题

1402

帖子

0

博客

马鹏磊

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-11-04 08:57:45 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script src="http://code.jwuery.com/jquery-1.11.0.min.js"></script>
<script>
//创建一个HTML元素
function $c(tagname){
   return document.createElement(tagname);
}
//文档加载完成后要执行的内容
$(document).ready(function(){
//绑定添加行按钮的单击事件
$("#addrow").bind("click",function(){
//取得table
var tr=$("#tab");
//创建tr元素
var tr=c("#tr");
//为table追加tr元素
tab.append(tr);
//创建td元素
var td1=$c("#td");
//td元素的内容
td1.innerHTML="insert1";
//为新追加的tr追加td元素
tr.appengChild(td1);
var td2=$c("#td");
tr.appengChild(td2);
});
//绑定删除行按钮的单击事件
$("#deleterow").bind("click",function(){
//取得table的第一行
var tab=("#tab tr:eq(0)");
//删除行
tab.remove();
});
});
</script>
<form>
<table  border=1 width=100 cellspacing=0>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
</table>
<input type="button" value="button" id="addrow">添加行
<input type="button" value="button" id="deleterow">删除行
</form>
Yc

0

主题

847

帖子

0

博客

Yc

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-14 16:53:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<html>
<head>
<title></title>
</head>
<body>
<table id="testTbl" border=1 align="center">
	<tr>
		<td>TD1</td>
		<td>TD2</td>
		<td>TD3</td>
	</tr>
	
</table>
<input type="button" name="Submit2" value="添加" onclick="fun()">
<script>
function fun(){
//添加行

var newTr = testTbl.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性


newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';
}
function del(o)
{
var   t=document.getElementById('testTbl');
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>

0

主题

1458

帖子

0

博客

梦紫菱0124

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-19 19:39:49 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<html>
<head>
<script src ="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
//创建一个html元素
function $c(tagname){
return document.createElement(tagname);
}
//文档加载完成后要执行的内容
$(document).ready(function(){
//绑定添加行按钮的单击事件
$("#addrow").bind("click",function(){
//取得table
var tab=$("#tab");
//创建tr元素
var tr=$c("tr");
//为table追加tr元素
tab.append(tr);
//创建td元素
var td1=$c("td");
//td元素中的内容
td1.innerHTML="insert1";
//为新追加的tr追加td元素
tr.appendChild(td1);
var td2=$c("td");
td2.innerHTML="insert2";
tr.appendChild(td2);
})
//绑定删除行按钮的单击事件
$("#deleterow").bind("click",function(){
//取得table第一行
var tab = $("#tab tr:eq(0)");
//删除此行
tab.remove();
})
})
</script>
</head>
<body>
<table border='1' id="tab">
<tr>
<td>123</td>
<td>456</td>
</tr>
<table>
<button id="addrow">添加行</button>
<button id="deleterow"> 删除行</button>
</body>
</html>

0

主题

233

帖子

0

博客

吕雪

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-11-30 10:16:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>控制表格</title>
 </head>
 <body>
 
  <script type="text/javascript">
   //页面加载完后所触发的事件
   window.onload=function(){
    //序号
    var n=0;
    //点击"增加一行"按钮所触发的事件
    document.getElementById("btn").onclick=function(){
     //通过ID得到表格的JS对象
     var obj_tbl=document.getElementById("tbl");
     //为表格插入行
     obj_tr=obj_tbl.insertRow();
     n++;
     
     //为行插入一个单元格:序号
     obj_cell=obj_tr.insertCell();
     //在单元格中加入序号
     obj_cell.innerHTML=n;
     
     //为行插入一个单元格:复选框
     obj_cell=obj_tr.insertCell();
     //在单元格中加入复选框
     obj_cell.innerHTML="<input type='checkbox' name='ids' value='"+n+"'>";
     
     //为行插入一个单元格:文本
     obj_cell=obj_tr.insertCell();
     //在单元格中加入文本
     obj_cell.innerHTML="第"+n+"行";
     
     //为行插入一个单元格:输入框
     obj_cell=obj_tr.insertCell();
     //在单元格中加入输入框
     obj_cell.innerHTML="<input type='input' name='values'>";
     
     //为行插入一个单元格:按钮
     obj_cell=obj_tr.insertCell();
     //在单元格中加入按钮
     obj_cell.innerHTML="<input type='button' value='删除' onclick='deleteRow(this)'>";
    };
       

   //点删除按钮(o)所触发的事件
   function deleteRow(o){
    //删除按钮(o)的父节点(单元格)的父节点(行)的编号
    var i=o.parentNode.parentNode.rowIndex;
    document.getElementById("tbl").deleteRow(i);
   }
   
  </script>
  
  <br>
  <input type="button" id="btn" value="增加一行">
  <br>
  <form action="">
   <table id="tbl" border=1 style="width:500px" bordercolor="33ff33">
    <caption>使用js动态控制表格</caption>
    <tr>
     <td>序号</td>
     <td><input type="checkbox" id="chk_all"></td>
     <td>文本</td>
     <td>输入框</td>
     <td>操作</td>
    </tr>
   </table>
  </form>
 </body>
</html>

 

当点击“增加一行”按钮时,表格会插入一行;

当点击“删除”按钮时,当前行删除。

0

主题

281

帖子

9

博客

love

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-06-07 11:13:45 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
//动态添加行
function addRow(){
   var widths = [50,50,50,50];
   var table = document.getElementById("tableID");

   var newRow = table.insertRow(); //创建新行
  // var newCell = newRow.insertCell(); //创建新单元格
    for(var i=0;i<widths.length;i++){
       var newCell = newRow.insertCell(0); //创建新单元格
       newCell.width= widths[i];
       newCell.innerHTML = ""; //单元格内的内容
       newCell.setAttribute("align","center"); //设置位置
//      var checkbox = document.createElement("input");
//      checkbox.type="checkbox";
//      checkbox.name="oCheck";
//      checkbox.id="mycheckid";
//      checkbox.value="112233";
//      newCell.appendChild(checkbox);
   }
}
//动态删除行
function deleteRow(){
   var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById("tableID");
   styles.deleteRow(rowIndex);
}

0

主题

1932

帖子

0

博客

740317431

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-15 17:57:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script language='javascript'>
//序列号
var n=1;
//在表格中新增一行
function createRow(){

	//得到表格中新增的行对象
	newTr = document.all.t1.insertRow();
	//设置行对象的id为"tr"+当前的序列号
	newTr.id="tr"+n;
	//设置第一列,
	newTd=newTr.insertCell(0);
	newTest=document.createTextNode("张三");
	newTd.appendChild(newTest);
	//设置第二列,
	newTd=newTr.insertCell(1);
	newTest=document.createTextNode("2"+n);
	newTd.appendChild(newTest);
	//设置第三列,
	newTd=newTr.insertCell(2);
	newTest=document.createTextNode("男");
	newTd.appendChild(newTest);
	//设置第四列,动态拼删除按钮
	newTd=newTr.insertCell(3);
	newTd.innerHTML="<a href='#' onClick='deleteRow("+n+")'>删除</a>";
	//序列加1
	n=n+1;
}
//在表格中删除一行,参数是行的id
function deleteRow(dnum){
	//删除行
	//得到要删除的行对象
	var dRow=document.getElementById("tr"+dnum);
	//得到要删除的行是当前表格的第几行
	var index=dRow.rowIndex;
	//按当前表格的行数,删除对应的行
	document.all.t1.deleteRow(index);
}
</script>

<body>
	<input type="text" name="v1" />
	<table >
		<tr>
			<td><input type="button" value="新增" onClick="createRow();"/></td>
		</tr>
	</table>

	<table id="t1" border="1">
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
			<td>操作</td>
		</tr>
	</table>
</body>

0

主题

1902

帖子

0

博客

王之神判

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-16 10:57:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
	
<script language='javascript'>
//序列号
var n=1;
//在表格中新增一行
function createRow(){

	//得到表格中新增的行对象
	newTr = document.all.t1.insertRow();
	//设置行对象的id为"tr"+当前的序列号
	newTr.id="tr"+n;
	//设置第一列,
	newTd=newTr.insertCell(0);
	newTest=document.createTextNode("张三");
	newTd.appendChild(newTest);
	//设置第二列,
	newTd=newTr.insertCell(1);
	newTest=document.createTextNode("2"+n);
	newTd.appendChild(newTest);
	//设置第三列,
	newTd=newTr.insertCell(2);
	newTest=document.createTextNode("男");
	newTd.appendChild(newTest);
	//设置第四列,动态拼删除按钮
	newTd=newTr.insertCell(3);
	newTd.innerHTML="<a href='#' onClick='deleteRow("+n+")'>删除</a>";
	//序列加1
	n=n+1;
}
//在表格中删除一行,参数是行的id
function deleteRow(dnum){
	//删除行
	//得到要删除的行对象
	var dRow=document.getElementById("tr"+dnum);
	//得到要删除的行是当前表格的第几行
	var index=dRow.rowIndex;
	//按当前表格的行数,删除对应的行
	document.all.t1.deleteRow(index);
}
</script>

<body>
	<input type="text" name="v1" />
	<table >
		<tr>
			<td><input type="button" value="新增" onClick="createRow();"/></td>
		</tr>
	</table>

	<table id="t1" border="1">
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
			<td>操作</td>
		</tr>
	</table>
</body>

0

主题

1694

帖子

0

博客

wulinan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-19 23:50:34 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language =javascript >


var n=1;
//新增一行
function addrow(){
var x=document.all("t1").value;

for(var j=0;j<x;j++){
new_row=document.all.t2.insertRow();
 
//行的id

new_row.id="tr"+n;
for(var i=0; i<3;i++)
{new_col=new_row.insertCell(i);
new_test=document.createTextNode(" ");
new_col.appendChild(new_test);}

n= n+1;}




}
var j=1;
//删除行
function del_row(){
var x=document.all("t1").value;
for(var i=0;i<x;i++){
var r=document.getElementById("tr"+j);

var index=r.rowIndex;
document.all.t2.deleteRow(index);
j=j+1;}


}

</script>
</head>

<body>
<input type =text id ="t1">
<table>
<tr>
<td>
<input  type =button value="新增"  onclick ="addrow();">
</td>
<td>
<input  type =button value="删除"  onclick ="del_row();">

</td>
</tr>
</table>
<table id ="t2" border ="1" width=200 height =60>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>


</tr>



</table>
</body>

</html>

0

主题

997

帖子

0

博客

lijiaxing

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-11-09 11:47:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<script>
 function add(){
  var tbl = document.getElementById("tbl");
  var tr = tbl.insertRow();
  var td = tr.insertCell();
  td.innerHTML = "第"+tbl.rows.length+"行";
 }
 function del(){
  var tbl = document.getElementById("tbl");
  if(tbl.rows.length > 0){  
   tbl.deleteRow(tbl.rows.length-1);
  }
 }
</script>

<input type="button" value="添加行" onclick="add()" />
<input type="button" value="删除行" onclick="del()" />

<table id="tbl" border=1 width="500">
 
</table>

 

0

主题

445

帖子

1

博客

灰羽

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2018-04-25 19:46:52 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
A


站点统计|举报|Archiver|手机版|小黑屋|Comsenz Inc.

GMT+8, , Processed in 0.195171 second(s), 9 queries .

Powered by javakc! X1.0

© 2004-2014 javakc

f1208.com 备案号:京ICP备14030918号-1

返回顶部