实例
<!DOCTYPE html>
<html>
<head>
<title>JS操作列表与表格</title>
</head>
<body>
<label>留言<input name="ly" type="text" autofocus="autofocus"></label>
<ul id="ul1">
</ul>
<br/><br/>
<input type="button" value="批量添加到表格" onclick="ff()"/>
<table id="t1" border-collapse:collapse; border="1" >
<caption>留言</caption>
<thead>
<tr>
<th>评论</th><th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Good!</td><td><a href="#" onclick="del2(this)">删除</a></td>
</tr>
</tbody>
</table>
</body>
<script>
var comment=document.querySelector("input");
var ul=document.getElementsByTagName("ul")[0];
comment.onkeydown=function(event){
if (event.keyCode===13){
var li=document.createElement("li");
li.innerHTML=comment.value+'<a href="javascript:;" onclick="del1(this)">删除</a>';
if (ul.children.length===0){
ul.appendChild(li);
}else{
ul.insertBefore(li,ul.firstElementChild);
}
// 清空留言区,并设置焦点
comment.value = '';
comment.focus();
}
}
function del1(obj){
if (confirm("确定删除？")){
obj.parentNode.parentNode.removeChild(obj.parentNode);
}else{
return;
}
}
function del2(obj1){
var insu=confirm("确定删除吗？");
if (!insu) return;
var robj=obj1.parentNode.parentNode;
//robj.parentNde.removeChild(robj);
var s1=robj.getElementsByTagName("td")[0].innerHTML;
var table=document.getElementById("t1");
for (i=0;i<table.rows.length;i++){
if (table.rows[i].cells[0].innerHTML==s1){
table.deleteRow(i);
break;
}
}
}
function ff(){
var lis=document.getElementsByTagName("li");
var tbody=document.querySelector("tbody");
for (var i=0;i<lis.length;i++){
var tr=document.createElement("tr");
var ss=lis[i].innerText;
ss=ss.substring(0,ss.length-2);
tr.innerHTML = '<td>'+ss+'</td>';
tr.innerHTML += '<td><a href="#" onclick="del2(this)">删除</a></td>';
tbody.appendChild(tr);
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
