本编文章对学过js的朋友而没思路写的的朋友可以作为一个参考，没有学过js的建议先学习基础知识。
整体效果：
源码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>增删减</title><script src="js/jquery-3.6.0.js"></script><style>body {text-align: center; width: 100%;height: auto;background: darkgray;margin: 0px;padding: 0px;}#body {width: 100%;background: gray;}#das {margin: 0 auto;}#cazo {text-align: center;width: 500px;margin: 30px auto;}#cazo button {margin-left: 20px;width: 80px;height: 30px;}thead th {background: pink;}tbody {text-align: center;}button:hover {color: red;background: skyblue;cursor: pointer;border: 2px solid skyblue;transition-duration: 0.3s;}.tan-add {text-align: center;width: 70%;height: 300px;background: floralwhite;position: absolute;top: 110px;left: 16%;}.tan-add p {display: inline-block;}.tan-add button {margin-top: 30px;}.ou {background: gray;}.ji {background: darkslategray;}.dj {background: lightgreen;}</style></head><body><div id="body"><h2 style="text-align: center;color: brown;">流行歌曲管理</h2><table cellspacing='0' cellpadding='15' border="1px" id="das"><thead><tr><th><input type="checkbox" id="nul"></th><th>演唱</th><th>歌名</th><th style="width: 100px;">操作</th></tr></thead><tbody id="tbody"><tr><td><input type="checkbox"></td><td class="user">焦迈奇</td><td class="song">你曾是少年</td><td><button class="del">删除</button><button class="change">修改 </button></td></tr><tr><td><input type="checkbox"></td><td class="user">陈奕迅</td><td class="song">爱情转移</td><td><button class="del">删除</button><button class="change">修改</button></td></tr><tr><td><input type="checkbox"></td><td class="user">栗先达</td><td class="song">觅香</td><td><button class="del">删除</button><button class="change">修改</button></td></tr><tr><td><input type="checkbox"></td><td class="user">郑浩</td><td class="song">须尽欢</td><td><button class="del">删除</button><button class="change">修改</button><button class="save" style="display: none;">保存</button></td></tr></tbody></table><div id="cazo"><button id="delete">删除多选</button><button id="addd">添加</button><button id="search">查找</button></div></div><!-- 弹窗 --><!-- 添加窗 --><div class="tan-add" id="tian-add"><form action="#" method="get"><h3>添加歌曲</h3><p class="tan-p">演唱者：</p><input type="text" class="tan-whi" id="addu"><p>歌名：</p><input type="text" class="tan-whi" id="adds"><br /><button id="aad" onclick="return reaus(this)">添加</button><button class="exit" type="button">关闭窗口</button></form></div><!-- 查找窗 --><div class="tan-add" id="cha-add"><h3>查找歌曲</h3><p>歌名：</p><input type="text" class="tan-whi" id="insearch"><br /><button id="searchs">查找</button><button class="exit" type="button">关闭窗口</button></div>
//以下代码须先引入jQuery文件才可执行<script>// 删除行$(document).on('click','.del',function() {$(this).parent().parent().remove()})// 全选框及样式实现$(document).on('change','#nul',function() {$('#nul,tbody input').prop('checked', $(this).prop('checked'))if ($('#nul').prop('checked')) {$('tbody tr').addClass('dj')} else {$('tbody tr').removeClass('dj')}})$(document).on('change','tbody input',function() { if ($('tbody input:checked').length === $('tbody input').length) {$('#nul').prop('checked', true)} else {$('#nul').prop('checked', false)}if ($(this).prop('checked')) {$(this).parent().parent().addClass('dj')} else {$(this).parent().parent().removeClass('dj')}})// 删除选中行$('#delete').click(function() {$('tbody input:checked').parent().parent().remove()})//隐藏所有弹窗$(function() {$('.tan-add').hide(0)})// 修改信息$('#change').click(function() {$('#xiu-add').show(100)})// 关闭窗口$('.exit').click(function(){$('.tan-add').hide(100)})// 表格样式$('#tbody tr:odd').addClass('ou')$('#tbody tr:even').addClass('ji')// 添加信息$('#addd').click(function() {$('#tian-add').show(100)})function reaus() {var use = $('#addu').val()var mm = $('#adds').val()if (use=='' && use.length==0) {alert('演唱不能为空')return false}else if(mm=='' && mm.length==0){alert('歌名不能为空')return false}$('.tan-add').hide(100)$('#tbody').append('<tr>' +'<td><input type="checkbox"></td>' +'<td class="user">' + use + '</td>' +'<td class="song">' + mm + '</td>' +'<td><button class="del">删除</button><button class="change">修改</button><button class="save" style="display: none;">保存</button></td>' +'</tr>')$('#tbody tr:odd').addClass('ou')$('#tbody tr:even').addClass('ji')}//修改信息$(document).on('click','.change',function(){var aj=$(this).parent().parent().children()for(var i=0;i<aj.length;i++){var $td=aj.eq(i)if($td.children().length<=0){var html="<input type='text' value='"+$td.text()+"'/>"$td.html(html)}}$(".xg").hide()$(".save").show()})//保存按钮$(document).on('click','.save',function(){var $tr=$(this).parent().parent()var $an=$tr.find("input[type='text']")for(var i=0;i<$an.length;i++){var ipt=$an.eq(i)ipt.parent().text(ipt.val())ipt.remove()}$(".xg").show()$(".save").hide()})//查找信息$('#search').click(function() {$('#cha-add').show(100)})$('#searchs').click(function(){var gsins=$('#insearch').val()if(gsins!=""){$(".song").each(function(){if($(this).text()==gsins){$(this).parent().children().eq(0).children().prop('checked','checked')$('.tan-add').hide(100)}})}else{alert('输入为空')} })</script></body>
</html>
后期会更新table翻页版增减删查以及使用bootstrap框架的增减删查。
若有哪些不足欢迎大家评论交流
