首頁猿問我想通過下標(biāo)刪除li，li里面有一...

我想通過下標(biāo)刪除li，li里面有一個刪除按鈕，點(diǎn)擊刪除可以刪除li

JQuery

in23 2016-03-21 10:18:52

?js事件代碼：??

查看完整描述

1 回答

已采納

display_none

TA貢獻(xiàn)52條經(jīng)驗(yàn) 獲得超13個贊

<!DOCTYPE html>
<html>
?<head>
? <title> new document </title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript">
? // 鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
???? function test(n){
??????? n.onmouseover=function(){
??????????? n.style.backgroundColor="#f2f2f2";
??????? }
??????? n.onmouseout=function(){
??????????? n.style.backgroundColor="#fff";
??????? }
???? }
??? ?
????? window.onload = function(){
??? var x=document.getElementsByTagName("tr");
?? ?for(var i=0;i<x.length;i++){
?????? test(x[i]);
?? ?}
?? ? }
???? // 編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點(diǎn)；? ?
????? function add(){
??????? var sNum=window.prompt('請輸入學(xué)號','xh001');
??????? var sName=window.prompt('請輸入姓名','');
??????? if(sNum!=null&&sName!=null){
??????????? var newtr=document.createElement('tr');
??????????? newtr.innerHTML='<td>'+sNum+'</td>'+'<td>'+sName+'</td>'+'<td><a href="javascript:;" onclick="del(this);">刪除</a></td>';
??????????? var oTC=document.getElementById("table");
??????????? oTC.appendChild(newtr);
?????????? ?
??????? }else{alert('請重新輸入');}
?????? ?
??????? var x=document.getElementsByTagName("tr");
??????? for(var i=0;i<x.length;i++){
?????????? test(x[i]);
?? ??? ?}
???? }
???? // 創(chuàng)建刪除函數(shù)
???? function del(k){
???????? var oG=k.parentNode.parentNode.parentNode;
???????? var oP=k.parentNode.parentNode;
???????? oG.removeChild(oP);
???? }

? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學(xué)號</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?

?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:del();">刪除</a></td>?? 
?? ??? </tr>

?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:del();" >刪除</a></td>?? 
?? ??? </tr> ?

?? ??? </table>
?? ??? <input type="button" value="添加一行" onclick="add()" />?? 
?</body>
</html>