js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能示例
本文實(shí)例講述了js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能。分享給大家供大家參考,具體如下:
JS實(shí)現(xiàn)自動(dòng)生成表格
由于自己的算法8太行,所以只能盡量用簡(jiǎn)單點(diǎn)的方法實(shí)現(xiàn)效果
下面直接上代碼
<table id="table"> <thead> <td>姓名</td> <td>年齡</td> <td>身高</td> </thead> <tbody></tbody> </table>
<style>
.del{
cursor: pointer;
color: blue;
}
</style>
<script>
var tableInfo = [
{ 姓名: '張三', 年齡: 20, 身高: 160 },
{ 姓名: '李四', 年齡: 18, 身高: 158 },
{ 姓名: '王二麻子', 年齡: 19, 身高: 180 },
{ 姓名: '孫悟空', 年齡: 100, 身高: 150 },
{ 姓名: '豬八戒', 年齡: 100, 身高: 155 },
{ 姓名: '龜龜', 年齡: 200, 身高: 0.5 }
]
var tr = document.createElement('tr');
var tdName = document.createElement('td');
var tdAge = document.createElement('td');
var tdTall = document.createElement('td');
var del = document.createElement('span');
//td賦值為對(duì)應(yīng)的表格信息
tdName.innerHTML = tableInfo[i].姓名;
tdAge.innerHTML = tableInfo[i].年齡;
tdTall.innerHTML = tableInfo[i].身高;
//設(shè)置刪除按鈕
del.innerHTML = '刪除';
del.className = 'del';
//調(diào)用創(chuàng)建函數(shù)
createAll(tdName, tdAge, tdTall);
}
//創(chuàng)建tr>td 和刪除按鈕
function createAll(tdName, tdAge, tdTall) {
table.appendChild(tr);
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdTall);
tr.appendChild(del);
}
//設(shè)置刪除按鈕的點(diǎn)擊事件
var btnDel = document.getElementsByClassName('del');
for (var i = 0; i < btnDel.length; i++) {
btnDel[i].onclick = function () {
//找到刪除鍵的父節(jié)點(diǎn)(tr)并移除
this.parentNode.remove();
}
}
</script>
代碼效果:

如果有什么地方做的不夠完善,請(qǐng)多多指教
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 基于JavaScript代碼實(shí)現(xiàn)自動(dòng)生成表格
- 用js實(shí)現(xiàn)的一個(gè)根據(jù)內(nèi)容自動(dòng)生成表格的函數(shù)
- 用js+xml自動(dòng)生成表格的東西
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端
- JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
- JS控制網(wǎng)頁(yè)動(dòng)態(tài)生成任意行列數(shù)表格的方法
- js動(dòng)態(tài)生成指定行數(shù)的表格
- 用按鈕觸發(fā)Javascript動(dòng)態(tài)生成一個(gè)表格的代碼
- JavaScript根據(jù)json生成html表格的示例代碼
- JavaScript生成帶有縮進(jìn)的表格代碼
- 利用JS動(dòng)態(tài)生成隔行換色HTML表格的兩種方法
相關(guān)文章
js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕,實(shí)例分析了javascript倒計(jì)時(shí)效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新【推薦】
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-06-06
微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解
這篇文章主要介紹了微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
three.js 實(shí)現(xiàn)露珠滴落動(dòng)畫(huà)效果的示例代碼
這篇文章主要介紹了three.js 實(shí)現(xiàn)露珠滴落動(dòng)畫(huà)效果的示例代碼,非常不錯(cuò),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
JavaScript利用時(shí)間分片實(shí)現(xiàn)高性能渲染數(shù)據(jù)詳解
為了豐富我們的知識(shí)體系,我們有必要了解并清楚當(dāng)遇到大量數(shù)據(jù)時(shí),如何才能在不卡主頁(yè)面的情況下渲染數(shù)據(jù),以及其中背后的原理,本文介紹了如何使用時(shí)間分片的方式來(lái)渲染大量數(shù)據(jù),感興趣的可以了解下2023-05-05
javascript table排序 這個(gè)更簡(jiǎn)單了,不用改變現(xiàn)在的表格結(jié)構(gòu)
另外一個(gè)table排序,這個(gè)更簡(jiǎn)單了,不用改變現(xiàn)在的表格結(jié)構(gòu),來(lái)自國(guó)外的代碼。2010-04-04
JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能
本篇文章給大家介紹了JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能,文字代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-03-03
解決layer彈出層自適應(yīng)頁(yè)面大小的問(wèn)題
今天小編就為大家分享一篇解決layer彈出層自適應(yīng)頁(yè)面大小的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09

