HTML图书管理增添删除怎么做，找不出问题
哪里出错了吗找了半天做不出来
html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
<link rel="stylesheet" href="./lib/bootstrap.css" />
head>
<body style="padding: 15px">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书h3>
div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon">书名div>
<input
type="text"
class="form-control iptBookname"
id="iptBookname"
placeholder="请输入书名"
/>
div>
<div class="input-group">
<div class="input-group-addon">作者div>
<input
type="text"
class="form-control iptAuthor"
id="iptAuthor"
placeholder="请输入作者"
/>
div>
<div class="input-group ">
<div class="input-group-addon">出版社div>
<input
type="text"
class="form-control iptPublisher"
id="iptPublisher"
placeholder="请输入出版社"
/>
div>
<button id="btnAdd" class="btn btn-primary">添加button>
div>
div>
<tablel class="table table-bordered table-hover">
<thead>
<tr>
<th>Idth>
<th>书名th>
<th>作者th>
<th>出版社th>
<th>操作th>
tr>
thead>
<tbody id="tb">
tbody>
table>
body>
<script src="lib/axios.js">script>
<script>
function loadtable() {
let table = document.querySelector('#tb')
axios
.get('http://nllcoder.com:8002/api/v1/books')
.then(function (res) {
// 1.2 渲染列表
// 遍历数组拼接列表
for (let i = 0; i < res.data.data.length; i++) {
// 取出每一个数据
let table = res.data.data[i]
table.innerHTML += `
${table.id}
${table.bookname}
${table.author}
${table.publisher}
删除
`
}
})
}
loadtable()
// 3. 添加图书
// 3.1 找到提交按钮，注册点击事件
let btn = document.querySelector('#btn')
btn.onclick = function () {
let booknameInput = document.querySelector('.bookname')
let authortInput = document.querySelector('.author')
let publisherInput = document.querySelector('.publisher')
// 3.2 判断文本框是否输入了，没有输入不提交，提示用户输入
if (booknameInput.value == '') {
alert('请输入书名')
return
}
if (authortInput.value == '') {
alert('请输入作者')
return
}
if (publisherInput.value == '') {
alert('请输入出版社')
return
}
// 3.3 文本框输入内容，发送请求，提交留言数据
axios
.post('http://nllcoder.com:8002/api/v1/books', {
bookname: booknameInput.value,
author:authorInput.value,
publisher:publisherInput.value
})
.then(function (res) {
// post成功，此处status是201
if (res.status == 201) {
// 3.4 判断提交是否成功，如果成功，重新加载列表，清空文本框
// loadtable()
booknameInput.value = ''
authorInput.value = ''
publisher.value = ''
} else {
alert('添加失败')
}
})
}
loadtable()
//删除列表
// 1.1使用事件委托的方式给删除按钮注册点击事件
let table = document.querySelector('.table')
table.onclick = function (e) {
// 判断当前点击的是否是删除按钮
if (e.target.matches('.del')){
// 1.2 点删除按钮弹出提示
if (confirm('确认删除该图书？')) {
//1.3 如果确认删除。向服务器发送请求删除数据（携带要删除的id）
let id = e.target.dataset.id
axios
.delete('http://nllcoder.com:8002/api/v1/books/'+id )
.then(function (res) {
// 判断删除是否成功
if (res.status == 200) {
alert('删除成功')
// 2.4 重新加载列表
loadtable()
} else {
alert('删除失败')
}
})
}
}
}
script>
html>
帮你改好了
注意单词拼写
获取元素的时候的选择器
命名不要重复
table标签里的tr td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- CDN引入axios -->
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- CDN引入bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body style="padding: 15px">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control iptBookname" id="iptBookname" placeholder="请输入书名" />
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control iptAuthor" id="iptAuthor" placeholder="请输入作者" />
</div>
<div class="input-group ">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control iptPublisher" id="iptPublisher" placeholder="请输入出版社" />
</div>
<button id="btnAdd" class="btn btn-primary">添加</button>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
<script>
function loadtable () {
let tableEl = document.querySelector('#tb')
tableEl.innerHTML = ''
axios
.get('http://nllcoder.com:8002/api/v1/books')
.then(function (res) {
// 1.2 渲染列表
// 遍历数组拼接列表
for (let i = 0; i < res.data.data.length; i++) {
// 取出每一个数据
let table = res.data.data[i]
tableEl.innerHTML += `
<tr>
<td>${table.id}</td>
<td>${table.bookname}</td>
<td>${table.author}</td>
<td>${table.publisher}</td>
<td class="del" data-id="${table.id}"> 删除 </td>
<tr/>
`
}
})
}
// 3. 添加图书
// 3.1 找到提交按钮，注册点击事件
let btn = document.querySelector('#btnAdd')
btn.onclick = function () {
let booknameInput = document.querySelector('.iptBookname')
let authorInput = document.querySelector('.iptAuthor')
let publisherInput = document.querySelector('.iptPublisher')
// 3.2 判断文本框是否输入了，没有输入不提交，提示用户输入
if (booknameInput.value == '') {
alert('请输入书名')
return
}
if (authorInput.value == '') {
alert('请输入作者')
return
}
if (publisherInput.value == '') {
alert('请输入出版社')
return
}
// 3.3 文本框输入内容，发送请求，提交留言数据
axios
.post('http://nllcoder.com:8002/api/v1/books', {
bookname: booknameInput.value,
author: authorInput.value,
publisher: publisherInput.value
})
.then(function (res) {
// post成功，此处status是201
if (res.status == 201) {
// 3.4 判断提交是否成功，如果成功，重新加载列表，清空文本框
loadtable()
booknameInput.value = ''
authorInput.value = ''
publisherInput.value = ''
} else {
alert('添加失败')
}
})
}
loadtable()
//删除列表
// 1.1使用事件委托的方式给删除按钮注册点击事件
let table = document.querySelector('.table')
table.onclick = function (e) {
debugger
// 判断当前点击的是否是删除按钮
if (e.target.matches('.del')) {
// 1.2 点删除按钮弹出提示
if (confirm('确认删除该图书？')) {
//1.3 如果确认删除。向服务器发送请求删除数据（携带要删除的id）
debugger
let id = e.target.dataset.id
axios
.delete('http://nllcoder.com:8002/api/v1/books/' + id)
.then(function (res) {
// 判断删除是否成功
if (res.status == 200) {
alert('删除成功')
// 2.4 重新加载列表
loadtable()
} else {
alert('删除失败')
}
})
}
}
}
</script>
</html>
81行的table和73行的table变量冲突了
- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7544577
麻烦哪位大佬帮忙解答呗，作业急急急在线等