js追加表格_JS動態添加表格

『壹』 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>

</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追加表格

js追加表格

與js追加表格相關的資料

友情鏈接