学习任何一个新知识点都离不开增删改查,下面是本人在写练习市用到的jQuery对象中的相关方法的主要思路以及相关代码。
1、增
点击添加按钮时,会弹出一个窗口,在窗口中的input中输入相关的值后,点击确定,窗口消失,相关数据会被添加到数据所在的列表中。
$(".tbody").append(`
<ul>
<li>
<input type="checkbox">
</li>
<li>
${txt1}
</li>
<li>
${txt2}
</li>
<li>
${newTime}
</li>
<li>
${txt3}
</li>
<li>
<span class="modify">编辑</span>
<span class="del">删除</span>
</li>
</ul>
`)
${}中的值就是获取到的input中的值。
2、删
选中想要删除的那一列数据,点击删除后,这一列数据就会从列表中删除。
function delFn() {
$('.del').click(function (e) {
if ($(e.target).is('span')) {
$(e.target).parents('ul').remove();
}
});
}
delFn();
3、改
修改数据与添加数据思路类似,点击编辑按钮时,会弹出一个窗口,在窗口中的input中输入相关的值后,点击确定,窗口消失,相关数据会被保存到数据所在的列表中替代列表中原有的数据。
$(e.target).parent().parent().find("li").eq(1).text($('.pop input').eq(0).val())
.next()
.next().html(newTime);
$(e.target).parent().parent().find("li").eq(1).text($('.pop input').eq(0).val())
.next()
.text($('.pop input').eq(1).val()).next().next().text($('.pop input').eq(2)
.val())
4、查
在搜索框中输入想要搜索的数据,然后拿到输入的值与列表中的相关数据相比较,如果有,则先清空列表,然后添加与搜索到的相同的数据,以达到查找的目的。
$('button').eq(0).on('click', function (e) {
var ipt1 = $('input').eq(0).val();
if (!ipt1) {
alert('输入查询内容')
} else {
for (var i = 0; i < $(".tbody").find("ul").length; i++) {
if ($(".tbody").find("ul").eq(i).find("li").eq(1).text().trim() == $('input').eq(0)
.val()) {
$(".tbody").html(`
<ul>
<li>
<input type="checkbox">
</li>
<li>
${$(".tbody").find("ul").eq(i).find("li").eq(1).text().trim()}
</li>
<li>
${$(".tbody").find("ul").eq(i).find("li").eq(2).text().trim()}
</li>
<li>
${$(".tbody").find("ul").eq(i).find("li").eq(3).text().trim()}
</li>
<li>
${$(".tbody").find("ul").eq(i).find("li").eq(4).text().trim()}
</li>
<li>
<span class="modify">编辑</span>
<span class="del">删除</span>
</li>
</ul>
`)