Week5Day3

来源：互联网发布：nginx 配置多目录访问编辑：程序博客网时间：2024/05/18 20:08

1·Core Dom

<body>

<table>

<tr>

<td>第一个单元格</td>

<td>第二个单元格</td>

<td><button>删除</button></td> --------- 删除按钮

.....

</table> --------- 给定一个表格

<button onclick = "addRow()">增加一行</button> ------- 增加一行按钮（调用addRow函数）

</body>

function addRow(){

var table = document.getElemnetByTagName("table")[0];

--- table会自动生成tbody"[0]"用来选定第一个tbody

var tr = table.insertRow(1); --- 在第二行后面插入行“tr”

var td1 = tr.insertCell(0); --- 在tr后面插入第一个单元格“td”

td1.innerHTML = "If you love me"; ---- 给定td内容

var td2 = tr.insertCell(1;) --- 在tr后面插入第二个单元格“td”

td2.innerHTML= "Please tell me now";---- 给定td内容

var td3 = tr.insertCell（2）; ---- 在tr后面插入第三个单元格

td3.align = "center"; ---- 给第三个单元格添加“center”样式

var button = document.createElement("button"); ----生成一个button元素并且赋值给“button”

button.innerHTML("删除");

button.onclick = function (){ ---------- 给button添加一个点击事件并进入函数

deleteRow(this); ----- 调用deleteRow函数并传“this”到形参“obj”

} ;

td3.appendChild(button）； ------ 在第三个单元格中加入“button”

}

function deleteRow(obj){

var index = obj.parentNode.parentNode.rowIndex; ----- 找到“this”所在父元素的父元素的索引

var table = document.getElementByTagName("table")[0]; --- 第一个tbody

table.deleteRow（index）; ---- 删除索引为“index”的行

}

addEvent(); ---------- addRow 函数自调用

function addEvent(){

var buttons = document.getElementByTagName("button"); --- 将所有button索引数组赋给buttons

for (var i = 0;i < buttons.length - 1;i++){ ---“-1”是为了去掉最后一个button按钮

buttons[i].onclick = function () { ---- 给索引为“i”的button添加点击事件

deleteRow(this); ---- 调用deleteRow函数

}

2·HTMLDOM

cells 单元格对象

rowIndex 行对象索引

deleteCell（i）删除索引为i的单元格

insertell（i）在索引为i的单元格后面插入一个单元格

阅读全文

0 0