JavaScript DOM-exercise-5｜官方解法 & jQuery解法 insertRow(), insertCell()

May 14, 2022

前言：原本是寫劇評心得的medium，時隔多日也沒再更新，因為都更新到我的wordpress了XD如果還是想看劇的話還是追蹤我的IG比較好哈哈哈哈，這裡以後應該會多更新一些前端技術筆記，真的很不好意思因為影劇訂閱我的人哈哈哈ㄏ。

Write a JavaScript function to add rows to a table.
寫一個可以新增表單列的JS程式。

直行(column)橫列(row)
每一個小格子叫做cell

官方解法

官方解法一樣把onclick寫在html上

var x=document.getElementById(‘sampleTable’).insertRow(0);
先取得table，並且insertRow()新增一列，後面的參數是index，意思是從index=0的地方（也就是第一列）開始新增。

但是如果只新增列，就真的只有列，不會有中間的cell，所以還需要用到inserCell()：
var y = x.insertCell(0); var z = x.insertCell(1);
後面的參數一樣是index

除了inserRow()、inserCell()以外，還有deletRow()、deletCell()，用法也差不多。

之前常使用的append()是將子元素追加到父級的最後，而今天用到的prepend()則是在父級最前面追加一個子元素；我研究超久要怎麼添加rows跟cells，後來用模板寫html

$(“#insert”).click(function () {
 $(“#sampleTable”).prepend(`<tr>
 <td>New cell1</td>
 <td>New cell2</td>
 </tr>`)
});

好懶(◉３◉)算惹有寫出來就好了啦，寫程式就是結果論٩(◦`꒳´◦)۶