新手寫的代碼,用定時器設置ID 然后傳遞參數(shù)的辦法 刪除tr標簽
<!DOCTYPE html>
<html>
?<head>
? <title> new document </title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>? ?
? <script type="text/javascript">?
? ? ? window.onload = function(){
?? ? ? ? ? ? ? ? ?
?? ? // 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
?? ? ? ?
? ? ? ? var table=document.getElementById('table');
? ? ? ? var tablebody = table.firstElementChild;
? ? ? ? var tablebodytr =? tablebody.children; //get tr elements of tables?
? ? ? ? for (i=1;i<tablebodytr.length;i++) {
? ? ? ? ? tablebodytr[i].setAttribute("onmouseover","this.style.backgroundColor='red'");
? ? ? ? ? tablebodytr[i].setAttribute("onmouseout","this.style.backgroundColor=''");
? ? ? ? }
}
?
? ? //creat tables
? ? function createRows_tables() {
? ? ? var table=document.getElementById('table');
? ? ? var tablebody = table.firstElementChild;
? ? ? var tablebodytr =? tablebody.children; //get tr elements of tables?
? ? ? haskell = document.createElement('tr');
? ? ? haskell.setAttribute("onmouseout","this.style.backgroundColor=''");
? ? ? haskell.setAttribute("onmouseover","this.style.backgroundColor='red'");
? ? ? haskell.innerHTML="<td><input type='text' ></td><td><input type='text' ></td><td><a href='javascript:delterTr();' >刪除</a></td>"
? ? ? tablebody.appendChild(haskell)
? ? ? console.log(table.lastElementChild)
? ? }
?? ? // 創(chuàng)建刪除函數(shù)
? ? function delterTr(a) {
? ? ? var table=document.getElementById('table');
? ? ? var tablebody = table.firstElementChild;
? ? ? var tablebodytr =? tablebody.children; //get tr elements of tables?
? ? ? tablebodytr[a].remove()
? ? }
?? ?
?? ?
? ? function biaoji() {
? ? ? //for tables creats id? give remove() argements?
? ? ? var table=document.getElementById('table');
? ? ? var tablebody = table.firstElementChild;
? ? ? var tablebodytr =? tablebody.children; //get tr elements of tables?
? ? ? for (i=1;i<tablebodytr.length;i++) {
? ? ? ? tablebodytr[i].setAttribute("tableid",i);
? ? ? ? tablebodytr[i].lastElementChild.lastElementChild.setAttribute("href",'javascript:delterTr('+i+')');
? ? ? ? console.log(tablebodytr[i].lastElementChild.lastElementChild)
? ? ? }
?? ? ?
?? ? ?
? ? ? console.log(i)
?? ? ?
? ? }
setInterval(biaoji,1000); ?
? </script>?
?</head>?
?<body>?
? <table border="1" width="50%" id="table">
? <tr? id='1'>
<th>學號</th>
<th>姓名</th>
<th>操作</th>
? </tr> ?
? <tr? id='2' >
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" >刪除</a></td> ? <!--在刪除按鈕上添加點擊事件? -->
? </tr>
? <tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a href="javascript:);" >刪除</a></td> ? <!--在刪除按鈕上添加點擊事件? -->
? </tr> ?
? ? <tr >
? ? <td>xh003</td>
? ? <td>劉小啊</td>
? ? <td><a href="javascript:;" >刪除</a></td> ? <!--在刪除按鈕上添加點擊事件? -->
? ? </tr> ?
? </table>
? ? <br>
? <input type="button" value="添加一行" onclick="createRows_tables()" /> ? <!--在添加按鈕上添加點擊事件? -->
?
? ? tablebodytr[i].setAttribute("onclick","this.remove()");
? </body>
??
??
</html>