实例
<html>
<head>
<meta charset="UTF-8">
<!-- <link href="/demo/css.css" rel="stylesheet" type="text/css"> -->
<style>
#form1 td, #form1 th {width:100px;text-align:center}
#form1 tr{}
caption{font-size:1.3rem;margin: 15px 0}
#form1 { border-collapse: collapse;}
</style>
</head>
<body>
<table id="form1" border="1">
<caption>购物清单</caption>
<thead>
<tr>
<th>ID </th>
<th>商品 </th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr class="firstcows">
<td>1 </td>
<td>卫生纸 </td>
<td> 12</td>
<td>29 </td>
</tr>
<tr>
<td>2</td>
<td>牙膏 </td>
<td> 1</td>
<td>15 </td>
</tr>
<tr class="three">
<td>3 </td>
<td>方便面</td>
<td> 5</td>
<td>22 </td>
</tr>
<tr>
<td>4 </td>
<td>雪糕 </td>
<td> 10</td>
<td>12 </td>
</tr>
</tbody>
</table>
<!-- <script src="/demo/js.js" type="text/javascript"></script> -->
<script>
var data = [
{id: 5, name: '面包', count: 2, price: 10},
{id: 6, name: '香蕉', count: 5, price: 8},
{id: 7, name: '牙刷', count: 1, price: 15},
{id: 8, name: '脸盆', count: 1, price: 20},
];
var form1 = document.getElementById('form1');
var tbody = form1.children[2];;
data.forEach(function (value){
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td>';
tr.innerHTML += '<td>' + value.name + '</td>';
tr.innerHTML += '<td>' + value.count + '</td>';
tr.innerHTML += '<td>' + value.price + '</td>';
tbody.appendChild(tr);
} )
</script>
<hr/>
<!-- 节点操作: 经典的ToList -->
<h2>ToList</h2>
<p>除了上面的东西，作为程序员的你还想吃什么呢？</p>
<label for="buy">Buy Something</label>
<input type="text" name="buy" placeholder="什么都可以">
<ul></ul>
<script>
//var comment = document.getElementsByTagName('input')[0];
var comment = document.querySelector('input');
var ul = document.querySelector('ul');
comment.focus();
comment.onkeydown = function(event){
if(event.keyCode === 13){
var li = document.createElement('li');
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)")>删除</a>';
if(ul.childElementCount === 0) {// 也可以写 ul.children.length === 0 || ul.childNodes.length ===0
ul.appendChild(li);
}else{
var first = ul.firstElementChild; //指定第一条留言
ul.insertBefore(li,first); //在第一条前面插入
// ul.insertBefore(li,ul.childNodes[0]) 也可以用这段代码代替
}
// 清空留言区,并设置焦点
comment.value ='';
comment.focus();
}
}
function del(eted){ //eted是事件
if(confirm('确定删除吗？')){
var li = eted.parentNode; // eted.parentNode 事件（a标签）的父元素 被赋值给li
li.parentNode.removeChild(li);
}
return false;
}
</script>
<hr/>
<h2>ToList 2</h2>
<input type="text">
<ul id="mylist"><li>我是天下第一 <a href="javascript:;" onclick="dele(this)">删除</a></li> </ul>
<script>
var pinglun = document.getElementsByTagName('input')[1]//document.getElementsByTagName('input').item(1)
var mylist = document.getElementById('mylist');
pinglun.focus();
pinglun.onkeydown = function(event){
if(event.keyCode === 13){
var newli = document.createElement('li');
newli.innerHTML = pinglun.value + '<a href="javascript:;" onclick="dele(this)">删除</a>'
mylist.appendChild(newli);
mylist.insertBefore(newli,mylist.childNodes[0])
pinglun.value="";
pinglun.focus();
}
}
function dele(abc){
if(confirm('确定删除吗？')){
var shanchu = abc.parentNode;
shanchu.parentNode.removeChild(shanchu)
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
