JS動態(tài)添加Table的TR，TD實(shí)現(xiàn)方法
更新時(shí)間：2015年01月28日 15:51:16 投稿：shichen2014
這篇文章主要介紹了JS動態(tài)添加Table的TR，TD實(shí)現(xiàn)方法,涉及js針對Table中TR、TD節(jié)點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS動態(tài)添加Table的TR，TD實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title></title>
<SCRIPT language="JavaScript">
var tempRow=0;
var maxRows=0;
function insertRows(){
tempRow=table1.rows.length-1;
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=table1.rows;//類似數(shù)組的Rows
var newRow=table1.insertRow(table1.rows.length);//插入新的一行
var Cells=newRow.cells;//類似數(shù)組的Cells
for (i=0;i<2;i++)//每行的7列數(shù)據(jù)
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0: newCell.innerHTML="<td valign='top'>corpName</TD>"; break;
case 1 : newCell.innerHTML="<td valign='top'><a href='javascript:delTableRow(\""+tempRow+"\")'>刪除</a></TD>"; break;
}
}
maxRows+=1;
}
function delTableRow(rowNum){
if (table1.rows.length >rowNum){
table1.deleteRow(rowNum);
}
}
</SCRIPT>
</head>
<body>
<form action="">
<table border="0" cellspacing="0" cellpadding="0" width="98%" align="center">
<tr valign="top">
<th>
<input value="添加" type="button" onclick="insertRows()">
</th>
</tr>
</table>
<br />
<table border="1" width="98%" align="center" id="table1">
<tr>
<th >企業(yè)名稱</th>
<th>操作<th>
</tr>
</table>
</form>
</body>
</html>
<head>
<title></title>
<SCRIPT language="JavaScript">
var tempRow=0;
var maxRows=0;
function insertRows(){
tempRow=table1.rows.length-1;
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=table1.rows;//類似數(shù)組的Rows
var newRow=table1.insertRow(table1.rows.length);//插入新的一行
var Cells=newRow.cells;//類似數(shù)組的Cells
for (i=0;i<2;i++)//每行的7列數(shù)據(jù)
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0: newCell.innerHTML="<td valign='top'>corpName</TD>"; break;
case 1 : newCell.innerHTML="<td valign='top'><a href='javascript:delTableRow(\""+tempRow+"\")'>刪除</a></TD>"; break;
}
}
maxRows+=1;
}
function delTableRow(rowNum){
if (table1.rows.length >rowNum){
table1.deleteRow(rowNum);
}
}
</SCRIPT>
</head>
<body>
<form action="">
<table border="0" cellspacing="0" cellpadding="0" width="98%" align="center">
<tr valign="top">
<th>
<input value="添加" type="button" onclick="insertRows()">
</th>
</tr>
</table>
<br />
<table border="1" width="98%" align="center" id="table1">
<tr>
<th >企業(yè)名稱</th>
<th>操作<th>
</tr>
</table>
</form>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- JS組件Bootstrap Table使用方法詳解
- JS獲取Table中td值的方法
- JavaScript獲取table中某一列的值的方法
- Sortable.js拖拽排序使用方法解析
- Js獲取table當(dāng)前tr行的值的代碼
- JS實(shí)現(xiàn)動態(tài)生成html table表格的方法分析
- js操作table示例(個(gè)人心得)
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡單實(shí)例
- JavaScript操作table表格：遍歷、列讀取、刪除行、更新列等動態(tài)管理
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)鼠標(biāo)移動拖尾效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
淺談利用JavaScript進(jìn)行的DDoS攻擊原理與防御
這篇文章主要介紹了淺談利用JavaScript進(jìn)行的DDoS攻擊原理與防御,以及介紹了相關(guān)的中間人攻擊原理,需要的朋友可以參考下2015-06-06
javascript前端實(shí)現(xiàn)多視頻上傳
這篇文章主要為大家詳細(xì)介紹了javascript前端實(shí)現(xiàn)多視頻上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
Javascript實(shí)現(xiàn)多彩雪花從天降散落效果的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)多彩雪花從天降散落效果的方法,可實(shí)現(xiàn)雪花飄落及散開的效果,非常炫目華麗,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了Uniapp中使用Echarts的示例詳解這里只舉例折線圖，介紹了uni-app微信小程序使用echarts的方法,下載echart組件，可以先隨便建個(gè)文件夾，然后 npm init，接著下載依賴，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義多列選擇器使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Javascript中prototype屬性實(shí)現(xiàn)給內(nèi)置對象添加新的方法
這篇文章主要介紹了Javascript中prototype屬性實(shí)現(xiàn)給內(nèi)置對象添加新的方法,涉及javascript中prototype屬性的使用技巧,需要的朋友可以參考下2015-05-05
本文主要介紹了百度百科目錄導(dǎo)航樹小插件,具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09