习题
1.表格添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 600px;
cursor: pointer;
}
table td {
text-align: center;
}
table th {
background-color: blueviolet;
}
table tr {
background-color: pink;
}
</style>
</head>
<body>
<div id="dv">
请输入姓名:
<input type="text" value="" id="uname"/>
<br/> 请输入邮箱:
<input type="text" value="" id="email"/>
</div>
<input type="button" value="添加" id="btn"/>
<table border="1" cellpadding="0" cellspacing="0" id="tb">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td>小黑</td>
<td>xiaohei@126.com</td>
</tr>
<tr>
<td>小黑2</td>
<td>xiaohei@126.com</td>
</tr>
</tbody>
</table>
<script>
var btn = document.getElementById('btn')
btn.onclick = function () {
// console.log('haha')
// 获取文本框的内容
var uname = document.getElementById('uname')
var email = document.getElementById('email')
if (uname.value == '' || email.value == '') {
alert('信息不完整')
return false;
}
// 创建列
var td1 = document.createElement('td')
td1.innerHTML = uname.value
var td2 = document.createElement('td')
td2.innerHTML = email.value
//,把列添加到行中
var trObj = document.createElement('tr')
trObj.appendChild(td1)
trObj.appendChild(td2)
var tbd = document.getElementById('tbd')
// 把行添加到 tbody
tbd.appendChild(trObj)
}
</script>
</body>
</html>
2.删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li></ul>
<script>
var ul = document.querySelector('ul')
var btn = document.querySelector('button')
btn.onclick = function () {
if (ul.children.length == 0){
// alert('还删呐')
this.disabled = true;
}else {
ul.removeChild(ul.children[0])
}
}
</script>
</body>
</html>
3.动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
var tbody = document.querySelector('tbody')
//1.遍历数据
for (var i = 0; i < datas.length; i++) {
//2.创建tr
var tr = document.createElement('tr')
tbody.appendChild(tr)
for (var k in datas[i]){
var td = document.createElement('td')
td.innerHTML=datas[i][k]
tr.appendChild(td)
}
//3.添加删除
var td = document.createElement('td')
td.innerHTML='<a href="#">删除</a>'
tr.appendChild(td)
}
//2.删除
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
as[i].onclick = function (){
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>
4.留言发布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
//获取元素
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
var ul=document.querySelector('ul');
//注册事件
btn.onclick = function (){
// console.log(text.value)
if(text.value==''){
alert('你啥也没写就发布?')
return false;
}else {
//创建li
var li = document.createElement('li')
//先有li才能赋值
li.innerHTML=text.value
//添加元素
ul.insertBefore(li,ul.children[0])
// ul.appendChild(li)
}
}
</script>
</body>
</html>
5.留言发布删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
//获取元素
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
var ul=document.querySelector('ul');
//注册事件
btn.onclick = function (){
// console.log(text.value)
if(text.value==''){
alert('你啥也没写就发布?')
return false;
}else {
//创建li
var li = document.createElement('li')
li.innerHTML=text.value+"<a href='javascript:;'>删除</a>"
ul.insertBefore(li,ul.children[0])
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
as[i].onclick=function (){
ul.removeChild(ul.children[0])
}
}
}
}
</script>
</body>
</html>