javascript 動態(tài)添加表格行
<table id="testTbl" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr bgcolor=#0000FF>
<td width=6%><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
動態(tài)添加表行的javascript函數(shù)如下:
function addRow(){
//添加一行
var newTr = testTbl.insertRow();
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
newTd0.innerHTML = '<input type=checkbox id="box4">';
newTd2.innerText= '新加行';
}
就這么簡單,做點詳細的說明:
1、inserRow()和insertCell()函數(shù)
insertRow()函數(shù)可以帶參數(shù),形式如下:
insertRow(index)
這個函數(shù)將新行添加到index的那一行前,比如insertRow(0),是將新行添加到第一行之前。默認的insertRow()函數(shù)相當于insertRow(-1),將新行添加到表的最后。
insertCell()和insertRow的用法相同。
2、動態(tài)設(shè)置屬性和事件
上面行數(shù)中的innerHTML和innerText都是列的屬性。
這個inner,就是“inner”到<tb></tb>之間,innerText是添加到<tb></tb>之間的文本,innerHTML是添加到<tb></tb>之間的HTML代碼(這個so簡單,這個解釋挺多余的)
設(shè)置其他屬性也是用同樣的方式,比如,設(shè)置行背景色
newTr.bgColor = 'red';
設(shè)置事件也一樣,需要簡單說明一點。
比如,我要讓點擊新加行的時候執(zhí)行一個自己定義的函數(shù) newClick,newClick行數(shù)如下:
function newClick(){
alert("這是新添加的行");
}
對onclick事件設(shè)置這個函數(shù)的代碼如下:
newTr.onclick = newClick;
這里需要主義的是,=后面的部分必須是函數(shù)名,而且不能帶引號,
newTr.onclick = newClick();
newTr.onclick = 'newClick';
newTr.onclick = "newClick";
上面的寫法都是錯誤的。
為什么,其實知道為什么沒有什么意思,知道怎么用就OK了,如果不想知道,可以跳過下面這一段。
實際上這個=后面的newClick是指向自己定義的newClick函數(shù)的指針,javascript里面函數(shù)名就是指向函數(shù)的指針,加了引號括號什么的瀏覽器就找不到那個函數(shù)了。
下面的寫法,也是正確的
newTr.onclick = function newClick(){
alert("這是新添加的行");
}
這個使用函數(shù)名實際上是一樣的
設(shè)置其他的事件用法相同。
- JS動態(tài)添加option和刪除option(附實例代碼)
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- js 動態(tài)添加標簽(新增一行,其實很簡單,就是幾個函數(shù)的應(yīng)用)
- JS中動態(tài)添加事件(綁定事件)的代碼
- JS動態(tài)添加Table的TR,TD實現(xiàn)方法
- JS實現(xiàn)下拉框的動態(tài)添加(附效果)
- Js實現(xiàn)動態(tài)添加刪除Table行示例
- js下為表格內(nèi)部動態(tài)添加行的代碼
- javascript動態(tài)添加表格數(shù)據(jù)行(ASP后臺數(shù)據(jù)庫保存例子)
- javascript動態(tài)添加、修改、刪除對象的屬性與方法詳解
- javascript 動態(tài)添加事件代碼
- JS動態(tài)添加選項案例分析
相關(guān)文章
JSON字符串轉(zhuǎn)換JSONObject和JSONArray的方法
這篇文章主要介紹了JSON字符串轉(zhuǎn)換JSONObject和JSONArray的方法的相關(guān)資料,需要的朋友可以參考下2016-06-06詳解微信小程序如何實現(xiàn)類似ChatGPT的流式傳輸
這篇文章主要為大家介紹了微信小程序如何實現(xiàn)類似ChatGPT的流式傳輸示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03umi插件開發(fā)仿dumi項目自動生成導航欄實現(xiàn)詳解
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目自動生成導航欄實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01