利用javascript实现简单的图书增减操作

cyang233

于 2019-12-30 20:08:23 发布

阅读量486

点赞数

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/cyang233/article/details/103772750

版权

本文详细介绍了一种使用HTML和JavaScript实现的书籍信息管理方法，通过动态添加和删除表格行来展示书目及其价格，适合初学者理解网页交互原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	书名：<input type="text" id="shu">
	价格：<input type="text" id="jia">
	<button onclick="add()">添加</button>
	<table width="300px" border="1px" id="bg">
		<tr>
			<td>书名:</td>
			<td>价格:</td>
			<td>操作</td>
		</tr>
		<tr>
			<td>《白夜行》</td>
			<td>￥30</td>
			<td><button onclick="del(this)">x</button></td>
		</tr>
	</table>
	<script>
		var shu = document.getElementById("shu");
		var jia = document.getElementById("jia");
		var bg = document.getElementById("bg")
		function add(){
			var tr = bg.insertRow(1);
			var td = tr.insertCell(0);
			var td1 = tr.insertCell(1);
			var td2 = tr.insertCell(2);
			td.innerHTML = shu.value;
			td1.innerHTML = jia.value;
			td2.innerHTML = '<button onclick="del(this)">x</button>';
			shu.value = "";
			jia.value = "";
		}
		function del(a){
			var b = a.parentElement.parentElement;
			var c = b.rowIndex;
			bg.deleteRow(c);
		}
	</script>