导航:首页 > 编程语言 > js追加表格

js追加表格

 发布时间：2021-12-03 09:46:20

『壹』 js 如何点击按钮添加整个表格

第一，可以用层的显示/隐藏 控制表格（表格其实是事先创建好的）。
第二，可以动态创建表格，createElement("...")。
具体实现方法可以在网上查查。

『贰』 JS动态添加表格

<!DOCTYPEHTML>
<html>

<head>
<title>PageTitle</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<style>
*{
margin:0;
padding:0;
}

.wrap{
margin:20pxauto;
width:600px;
}

table{
width:600px;
border:1pxsolidblack;
border-collapse:collapse;
}

tableinput[type=button]{
width:50px;
height:25px;
border:0;
cursor:pointer;
}

tableinput[type=button]:hover{
background-color:#fd3;
}

tableinput[type=text]{
border-color:black;
border-width:001px0;
text-align:center;
}

tabletextarea{
width:90%;
height:100px;
resize:none;
}

th,td{
border:1pxsolidblack;
text-align:center;
}
</style>
<script>
varaddRow=function(btn){
vartbody=table.tBodies[0];
varrow=btn.parentElement.parentElement.rowIndex;
if(btn.value=='-'){
tbody.deleteRow(row);
}else{
vartr=tbody.insertRow(tbody.rows.length-1);
vararr=[
	"<select><option>城际交通费</option></select>",
	"<inputtype='text'onkeyup='calc(this)'name='je'/>",
	"<inputtype='text'/>",
	"<inputtype='button'value='+'onclick='addRow(this)'/>"
];
for(vari=0;i<4;i++){
vartd=tr.insertCell(tr.cells.length);
td.innerHTML=arr[i];
}
btn.value='-';
}
}
varcalc=function(txt){
		if(!/^[+-]?((d+(.d*)?)|(d*.d+))$/.test(txt.value)){
			txt.value=txt.value.replace(/[^+-.d]/g,"");
		}
		varjes=document.getElementsByName("je");
		varsum=0;
		for(vari=0;i<jes.length;i++){
			sum+=parseFloat(jes[i].value);
		}
		zje.value=sum;
}
onload=function(){
		dt.value=newDate().toLocaleString();
}
</script>
</head>

<body>
<divclass="wrap">
<tableid="table">
<tbody>
<tr>
<td>填写人：</td>
<td>
<inputtype="text"value="双枪将"/>
</td>
<td>填报时间：</td>
<td>
<inputtype="text"value=""id="dt"readonly/>
</span>
</td>
</tr>
<tr>
<td>总金额：</td>
<td>￥
<inputtype="text"id="zje"readonly/>
</td>
<td>状态：</td>
<td>
<inputtype="text"/>
</td>
</tr>
<tr>
<th>项目</th>
<th>金额</th>
<th>费用说明</th>
<th>操作</th>
</tr>
<tr>
<td>
<select>
<option>城际交通费</option>
</select>
</td>
<td>
<inputtype="text"onkeyup="calc(this)"name="je"/>
</td>
<td>
<inputtype="text"/>
</td>
<td>
<inputtype="button"value="+"onclick="addRow(this)"/>
</td>
</tr>
<tr>
<td>事由：</td>
<tdcolspan=3>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

『叁』 用js实现动态添加表格数据

<tablewidth="600"border="1"cellspacing="0">

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>职位</th>

<th>操作</th>

</tr>

</thead>

<tbodyid="tbMain"></tbody>

</table>

<scripttype="text/javascript">

//模拟一段JSON数据，实际要从数据库中读取

varper=[

{id:001,name:'张珊',job:'学生'},

{id:002,name:'李斯',job:'教师'},

{id:003,name:'王武',job:'经理'}

];

window.onload=function(){

vartbody=document.getElementById('tbMain');

for(vari=0;i<per.length;i++){//遍历一下json数据

vartrow=getDataRow(per[i]);//定义一个方法,返回tr数据

tbody.appendChild(trow);

}

}

functiongetDataRow(h){

varrow=document.createElement('tr');//创建行

varidCell=document.createElement('td');//创建第一列id

idCell.innerHTML=h.id;//填充数据

row.appendChild(idCell);//加入行，下面类似

varnameCell=document.createElement('td');//创建第二列name

nameCell.innerHTML=h.name;

row.appendChild(nameCell);

varjobCell=document.createElement('td');//创建第三列job

jobCell.innerHTML=h.job;

row.appendChild(jobCell);

//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮

vardelCell=document.createElement('td');//创建第四列，操作列

row.appendChild(delCell);

varbtnDel=document.createElement('input');//创建一个input控件

btnDel.setAttribute('type','button');//type="button"

btnDel.setAttribute('value','删除');

//删除操作

btnDel.οnclick=function(){

if(confirm("确定删除这一行嘛？")){

//找到按钮所在行的节点，然后删掉这一行

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

//btnDel-td-tr-tbody-删除(tr)

//刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除

}

}

delCell.appendChild(btnDel);//把删除按钮加入td，别忘了

returnrow;//返回tr数据

}

</script>

(3)js追加表格扩展阅读

js动态创建表格

vartab=document.createElement("table");

tab.border="1px";

document.body.appendChild(tab);

for(vari=0;i<3;i++){

vartr=document.createElement("tr");

for(varj=0;j<3;j++){

vartd=document.createElement("td");

td.innerHTML=Math.round(Math.random()*9);

tr.appendChild(td);

}

tab.appendChild(tr);

vardel=document.createElement("td");

del.innerHTML="删除";

tr.appendChild(del);

del.onclick=function(){

this.parentNode.remove();

}

}

『肆』 js动态添加表格行问题

function addline()
{
var i=addrow.rows.length//获得表格长度
var unamej = "uname'+i+'" ;
var typej = "type'+i+'" ;
newline=document.all.addrow.insertRow();
newline.insertCell().innerHTML='<td><input name="unamej" readonly="true" size="11"></td>';
newline.insertCell().innerHTML='<td><input name="typej"readonly="true" size="11" /></td>';
}

『伍』 js实现表格动态增加一行问题

你是想把添加的行插入在最后一行之前吗? 那么要使用insertBefore方法. 这样函数add变成如下这版个样子(使用了tb变量权保存表格对象):

functionadd()
{
vartb=document.getElementById("addtr");
varoTr=tb.rows[1];
varnewTr=oTr.cloneNode(true);

tb.getElementsByTagName("tbody")[0].insertBefore(newTr,tb.rows[tb.rows.length-1]);

newTr.cells[0].firstChild.value=newTr.rowIndex;
document.getElementById("b1").disabled=newTr.rowIndex==5;
}

『陆』 请教一个JS动态添加表格行的操作,,,

标准的表格操作，并没有 innerCell() 的，innerRow 是添加一行，innerCell 只在部分浏览器中可以实现，不过现在大部分都支持 innerCell();

<!DOCTYPEHTML>
<html>
<body>
<table>
<tbodyid="tab">

</tbody>
</table>
</body>
</html>
<scripttype="text/javascript">
window.onload=function(){
//为id=tab的控件添加一行<tr></tr>
varrow=tab.insertRow(-1);
//创建th列
varcell_0=document.createElement("th");
//设置他的scope属性为row，设置他的innerHTML为title
cell_0.setAttribute("scope","row");
cell_0.innerHTML="title";
varcell_1=document.createElement("th");
cell_1.setAttribute("scope","row");
cell_1.innerHTML="name";

//把创建好的cell_0和cell_1添加到行中
row.appendChild(cell_0);
row.appendChild(cell_1);
//打印出当前id=tab的内容，可以看到，<tr><thscope="row">title</th><thscope="row">name</th></tr>
alert(tab.innerHTML);
};
</script>

『柒』 js动态添加表格行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加Table行</title>
</head>
<script>
function addRow(obj)
{
//添加一行
var newTr = testTbl.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4">';
newTd1.innerText= '新加行';
}
</script>
<body>
<table id="testTbl" border=1>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
<br />
<input type="button" id="add" onclick="addRow();" value="Add Row" />
</body>
</html>

『捌』 如何用js实现表格添

functiongetDataRow(h){
varrow=document.createElement('tr');//创建行
varidCell=document.createElement('td');//创建第一列id
idCell.innerHTML=h.id;//填充数据
row.appendChild(idCell);//加入行，下面类似
varnameCell=document.createElement('td');//创建第二列name
nameCell.innerHTML=h.name;
row.appendChild(nameCell);
varjobCell=document.createElement('td');//创建第三列job
jobCell.innerHTML=h.job;
row.appendChild(jobCell);
//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
vardelCell=document.createElement('td');//创建第四列，操作列
row.appendChild(delCell);
varbtnDel=document.createElement('input');//创建一个input控件
btnDel.setAttribute('type','button');//type="button"
btnDel.setAttribute('value','删除');
//删除操作
btnDel.onclick=function(){
if(confirm("确定删除这一行嘛？")){
//找到按钮所在行的节点，然后删掉这一行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
//btnDel-td-tr-tbody-删除(tr)
//刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除
}
}
delCell.appendChild(btnDel);//把删除按钮加入td，别忘了
returnrow;//返回tr数据
}

『玖』 html中如何使用js动态添加表格

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中，则写在<script>标签内部，如

复制代码 代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下

复制代码 代码如下:

<table>
<thead></thead>

<tfoot><tfoot> //tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。

<tbody id="rows"></tbody>

</table>
[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr"); //创建行

td1=document.createElement("tr"); //创建单元格

td1.appendChild(document.createTextNode("content")); //为单元格添加内容

row.appendChild(td1); //将单元格添加到行内

document.getElementById("rows").append(row); //将行添加到<tbody>中

『拾』 关于js添加表格的行~

$(function(){
//比如原有3行，在后面追加行的话，这样做
varlastTr=$('tabletr').last();//选择到最后一行
lastTr.after('<tr>xx</tr>');//在这一行的后面追加东西，而不是追加到自己的里面
//如果是给前面追加东西，用lastTr.before('<tr></tr>')
});
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

阅读全文

与js追加表格相关的资料

热点内容
电影《龙棺命灯》免费在线观看 浏览：234
安卓235可安装微信的版本 浏览：424
好看的韩国推理片网站 浏览：416
有一部小说主角是开超市的 浏览：694
支持64位编程软件有哪些 浏览：837
win10电脑如何修复硬盘 浏览：2
全网封禁的50部小说 浏览：402
插卡小游戏叫什么app 浏览：174
金山文件怎样导在CAD 浏览：608
ug编程用什么样显卡 浏览：772
哪个网站可以免费买假货 浏览：365
530影院 浏览：166
和女儿发了关系的小说 浏览：361
主人翁是杨凡的小说免费阅读 浏览：684
法国啄木鸟官网 浏览：818
泰国同志片《隔离区》 浏览：161
win10遇到问题phase1 浏览：932
javaee配置jdk 浏览：600
ps人像修图视频教程 浏览：53
光网络架构 浏览：213

友情链接