Javascript Table 模擬 GridView (一) 初始化、新增列
前一篇寫完後,思考自己要不要寫一個 Gridview 來取代別人寫好的物件,想了一下還是寫一下好了,除了練功,順便了解一下原理.寫好以後覺得一篇應該寫不完,所以會區分幾篇來寫.
以下為本篇主要的步驟
- 預計模擬畫面
- 使用 JS 撰寫
- 加入新增一列指令 addRow
- 監聽新增按鈕 click 執行 addRow
一、預計模擬畫面
先在 html 寫好要模擬成的樣式
<div id = "sample">
<button>新增</button>
<table>
<thead>
<tr>
<th>第一個欄位</th>
<th>第二個欄位</th>
<th>第三個欄位</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><button>修改</button></td>
<td><button>刪除</button></td>
</tr>
</tbody>
</table>
</div>
執行畫面
二、使用 JS 撰寫
先在 html 寫好物件
<div id = "JSGridview"></div>
之後在寫 script , 將上面原本寫好的 html 語法放入
<script>
init();
function init(){
let JSGridview = document.getElementById("JSGridview");
let strHTML = "<p>JS Gridview</p>";
strHTML += "<button>新增</button>";
strHTML += "<table>";
strHTML += "<thead>";
strHTML += "<tr>";
strHTML += "<th>第一個欄位</th>";
strHTML += "<th>第二個欄位</th>";
strHTML += "<th>第三個欄位</th>";
strHTML += "<th></th>";
strHTML += "<th></th>";
strHTML += "</tr>";
strHTML += "</thead>";
strHTML += "<tbody>";
strHTML += "<tr>";
strHTML += "<td>1</td>";
strHTML += "<td>2</td>";
strHTML += "<td>3</td>";
strHTML += "<td><button>修改</button></td>";
strHTML += "<td><button>刪除</button></td>";
strHTML += "</tr>";
strHTML += "</tbody>";
strHTML += "</table>";
JSGridview.innerHTML=strHTML;
}
</script>
先執行看看是否跟最初寫的是否依樣
三、加入新增一列指令 addRow
跟 html 一樣之後,可以先加入新增的功能,不過在此之前可以先修一下 CSS 讓外觀看起來一樣.
<style>
#sample table,th,td{
border: 1px solid;
}
#JSGridview table,th,td{
border: 1px solid;
}
</style>
接著加入新增的功能 function , 注意事項都寫在程式中的註解
//測試新增一列
function addRow(){
//取得要控制的 Table , 這個範例為 JSGridview_table
let tbodyRef = document.getElementById("JSGridview_table").getElementsByTagName("tbody")[0];
//產生要新增的物件, insertRow() 不填索引則為最後一筆
let newRow = tbodyRef.insertRow();
//要產生的 明細
let strHTML = "";
strHTML += "<td></td>";
strHTML += "<td></td>";
strHTML += "<td></td>";
strHTML += "<td><button>修改</button></td>";
strHTML += "<td><button>刪除</button></td>";
newRow.innerHTML = strHTML;
}
然後在剛剛一開始的 init(); 後面加入 addRow();
<script>
//初始化
init();
//測試新增一列
addRow();
接著實行看看是否有直接多一列,以下是執行正常的畫面
四、監聽新增按鈕 click 執行 addRow
測試沒問題後,把 init(); 後的 addRow(); 先移除,然後加上按鈕監聽事件
//初始化
init();
//測試新增一列
// addRow();
//新增監聽
let btnAddRow = document.getElementById("btnAddRow");
btnAddRow.addEventListener(
"click",
function(){
addRow();
},
false
);
接著把原來 init() 內測試用的 tbody 內 tr td 註解或移除掉, 注意 tbody 不可以移除 !!
按鈕記得加上 id 才可以監聽
function init(){
let JSGridview = document.getElementById("JSGridview");
let strHTML = "<p>JS Gridview</p>";
//新增按鈕 加上 id ,用來新增資料
strHTML += "<button id = 'btnAddRow'>新增</button>";
//Table 加上 ID 才可以新增物件控制
strHTML += "<table id = 'JSGridview_table'>";
strHTML += "<thead>";
strHTML += "<tr>";
strHTML += "<th>第一個欄位</th>";
strHTML += "<th>第二個欄位</th>";
strHTML += "<th>第三個欄位</th>";
strHTML += "<th></th>";
strHTML += "<th></th>";
strHTML += "</tr>";
strHTML += "</thead>";
strHTML += "<tbody>";
// strHTML += "<tr>";
// strHTML += "<td>1</td>";
// strHTML += "<td>2</td>";
// strHTML += "<td>3</td>";
// strHTML += "<td><button>修改</button></td>";
// strHTML += "<td><button>刪除</button></td>";
// strHTML += "</tr>";
strHTML += "</tbody>";
strHTML += "</table>";
JSGridview.innerHTML=strHTML;
}
執行後的畫面及按下新增按鈕之後的畫面
留言
張貼留言