JavaScript實現動態生成表格案例詳解
阿新 • • 發佈：2021-12-23
目錄
- 前言
- 實現思路
- 實現程式碼
- 實現效果
前言
在這裡實現一個動態新增表格的案例，當點選新增按鈕時，可以彈出一個表單，然後將輸入的內容新增到表格中，也可以SZbJzGzPfi將表格中的整行內容清除。
實現思路
先建立一個表格和一個表單，將表單中輸入的內容動態新增進表格中，表單頁面右上角有一個關閉按鈕，當點選時，可以將表單頁面關閉並將表格頁面顯示。為了頁面美觀，我將新增資料的按鈕放在了表格的<tfoot></tfoot>中，將動態生成的表格資料新增到<tbody><tbody>中，當點選新增按鈕時，隱藏表格，並顯示錶單，在表單中填寫要新增的資訊，然後獲取輸入的資訊，通過生成表格的一行元素，並將獲得的值新增進去，最後將這一行新增到<tbody><tbody>的最後一行，當點選表單頁面的新增按鈕時，讓表單隱藏，並顯示修改後的變革，因為還要實現動態刪除功能，所以需要給表格中的每一行元素新增一個刪除屬性（超連結），當我們點選刪除時，獲取到其對應的行，進行刪除操作。
實現程式碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
table {
width: 410px;
margin: 100px auto 0;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
}
th,td {
width:150px;
height: 40px;
border: 1px solid #ccc;
padding: 10px;
}
a{
text-decoration: none;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
}
.item {
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
}
.lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.txt {
width: 300px;
height: 32px;
}
.form-add {
position: absolute;
top: 100px;
left: 578px;
border: 1px solid #ccc;
margin-left: -197px;
padding-bottom: 20px;
display: none;
}
.title {
SZbJzGzPfi
實現效果
到此這篇關於實現動態生成表格案例詳解的文章就介紹到這了,更多相關JavaScript動態生成表格內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以客棧後多多支援我們！