快捷導(dǎo)航

js動(dòng)態(tài)生成表格(節(jié)點(diǎn)操作)

更新時(shí)間：2021年01月12日 17:21:57 作者：劉劉劉code

這篇文章主要為大家詳細(xì)介紹了js動(dòng)態(tài)生成表格，進(jìn)行節(jié)點(diǎn)操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js動(dòng)態(tài)生成表格的具體代碼，供大家參考，具體內(nèi)容如下

針對(duì)DOM節(jié)點(diǎn)操作，該案例效果圖如下（代碼量不多，就沒(méi)有結(jié)構(gòu)與行為相分離）：

原生js實(shí)現(xiàn)（注釋里面解釋了做法）：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 table {
 width: 500px;
 margin: 100px auto;
 border-collapse: collapse;
 text-align: center;
 }

 td,
 th {
 border: 1px solid #333;
 }

 thead tr {
 height: 40px;
 background-color: #ccc;
 }
 </style>
 </head>
 <body>
 <table cellspacing="0">
 <thead>
 <tr>
  <th>姓名</th>
  <th>科目</th>
  <th>成績(jī)</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>
 </body>
 <script type="text/javascript">
 //因?yàn)槔锩娴膶W(xué)生數(shù)據(jù)都是動(dòng)態(tài)的，我們需要js動(dòng)態(tài)生成 這里我們需要模擬數(shù)據(jù)，自己定義好數(shù)據(jù)
 // 數(shù)據(jù)我們采取對(duì)象形式儲(chǔ)存
 //1 先準(zhǔn)備好學(xué)生的數(shù)據(jù)
 //2 所有數(shù)據(jù)都是放到tbody里面（多少人，多少行）
 var datas = [{
 name: '劉舒新',
 subject: 'JavaScript',
 score: '100'
 }, {
 name: '宋祥隆',
 subject: 'JavaScript',
 score: '80'
 },
 {
 name: '崔健',
 subject: 'JavaScript',
 score: '90'
 },
 {
 name: '郄海淼',
 subject: 'JavaScript',
 score: '70'
 }
 ];
 //console.log(datas.length);
 var tbody = document.querySelector('tbody');
 for (var i = 0; i < datas.length; i++) {
 //創(chuàng)建行
 trs = document.createElement('tr');
 tbody.appendChild(trs);
 //創(chuàng)建單元格 td的數(shù)量取決于每個(gè)對(duì)象里面的屬性個(gè)數(shù)
 for(var k in datas[i]){
 //創(chuàng)建單元格
 var td=document.createElement('td');
 //把對(duì)象里面的屬性值 給td
 //console.log(datas[i][k]);
 td.innerHTML=datas[i][k];
 trs.appendChild(td);
 }
 
 //創(chuàng)建操作刪除單元格
 var td=document.createElement('td');
 td.innerHTML='<a href="javascript:;" rel="external nofollow" >刪除</a>'
 trs.appendChild(td);
 }
 //刪除操作
 var a=document.querySelectorAll('a');
 for(var i=0;i<a.length;i++){
 a[i].onclick=function(){
 tbody.removeChild(this.parentNode.parentNode);
 }
 }
 </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
表格

相關(guān)文章

JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法，字典即Dictionary，是一種以?鍵-值對(duì)?形式存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，下文更多相關(guān)介紹需要的小伙伴可以參考一下
2022-04-04
一文搞懂JSON(JavaScript Object Notation)
Json 有兩種基本的結(jié)構(gòu)，即 Json對(duì)象和 Json 數(shù)組。通過(guò) Json 對(duì)象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu)，今天通過(guò)本文給大家介紹JavaScript Object Notation的基本知識(shí)，感興趣的朋友一起看看吧
2021-10-10
JS中reduce和map的優(yōu)雅寫(xiě)法分享
這篇文章主要為大家詳細(xì)介紹了JavaScript中一些reduce和map的優(yōu)雅寫(xiě)法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
javascript將url中的參數(shù)加密解密代碼
本文給大家分享一段給url參數(shù)加密解密的javascript代碼，非常的好用，有需要的小伙伴直接拿走吧
2014-11-11
Bootstrap縮略圖的創(chuàng)建方法
這篇文章主要介紹了Bootstrap縮略圖的創(chuàng)建方法，教大家如何實(shí)現(xiàn)Bootstrap縮略圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
在JavaScript中使用timer示例
這篇文章主要介紹了在JavaScript中如何使用timer，并給出各種測(cè)試case的例子,需要的朋友可以參考下
2014-05-05
利用純JS實(shí)現(xiàn)像素逐漸顯示的方法示例
這篇文章主要給大家介紹了利用純JS實(shí)現(xiàn)像素逐漸顯示的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08
js時(shí)間戳和c#時(shí)間戳互轉(zhuǎn)方法(推薦)
下面小編就為大家?guī)?lái)一篇js時(shí)間戳和c#時(shí)間戳互轉(zhuǎn)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
使用JS實(shí)現(xiàn)一個(gè)功能豐富的待辦事項(xiàng)應(yīng)用
在日常工作和生活中,我們經(jīng)常需要處理各種各樣的待辦事項(xiàng),這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)功能豐富的待辦事項(xiàng)應(yīng)用,需要的可以了解下
2024-01-01
判斷腳本加載是否完成的方法
在“按需加載”的需求中，我們經(jīng)常會(huì)判斷當(dāng)腳本加載完成時(shí)，返回一個(gè)回調(diào)函數(shù)，那如何去判斷腳本的加載完成呢？
2009-05-05