浅谈表格（jq）的增删改查
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈表格（jq）的增删改查相关的知识，希望对你有一定的参考价值。
html代码：
<table border="1" cellpadding="20" cellspacing="0"> <thead> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </thead> <tbody> </tbody> </table> <input type="text" class="name" placeholder="请输入姓名"/> <input type="text" class="age" placeholder="请输入年龄"/> <button class="add">添加</button><br> <input type="text" class="search" placeholder="请输入要查询的名字"/> <button class="sea">搜索</button><span class="dialog"></span><br /> <button class="sort">排序</button><br /> <button class="change">修改</button> <button class="save">保存</button> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
css代码：
<style type="text/css">
thead th{
width: 50px;
height: 50px;
background: black;
color: gold;
}
</style>
javascript（jq方法）：
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*****************添加的功能**********************************/
$(‘.add‘).click(function(){
var add_name=$(‘.name‘).val();
var add_age=$(‘.age‘).val();
var trs=$(‘tbody‘).children();
if(add_name==‘‘||add_age==‘‘){
alert(‘请输入内容‘);
}else{
$(‘tbody‘).append("<tr><td>"+(trs.length+1)+"</td><td>"+add_name+"</td><td>"+add_age+"</td><td><button class=‘del‘>删除</button></td></tr>");
}
del();
x_sort();
});
/********************删除的功能*************************************/
function del(){
for(var i=0;i<$(‘.del‘).length;i++){
$(‘.del‘).eq(i).click(function(){
$(this).parent().parent().remove();
x_sort();
})
}
}
del();
/***********************搜索功能************************************/
$(‘.sea‘).click(function(){
var kaiguan=true;
for(var i=0;i<$(‘tbody‘).children().length;i++){
$(‘tbody‘).children().eq(i).css({‘background‘:‘black‘,‘text-align‘:‘center‘,‘color‘:‘gold‘,‘height‘:‘50px‘,‘width‘:‘50px‘});
if($(‘tbody‘).children().eq(i).children().eq(1).text()==$(‘.search‘).val()){
$(‘tbody‘).children().eq(i).css({‘background‘:‘gold‘,‘text-align‘:‘center‘,‘color‘:‘black‘,‘height‘:‘50px‘,‘width‘:‘50px‘});
kaiguan=false;
}
}
if(kaiguan==false){
$(‘.dialog‘).html(‘‘);
}else{
$(‘.dialog‘).html(‘找不到信息！‘);
}
})
/*********************排序*****************************/
/*****序号排序********/
function x_sort(){
for(var i=0;i<$(‘tbody‘).children().length;i++){
$(‘tbody‘).children().eq(i).children().eq(0).html(i+1);
}
}
// /*************年龄排序****************/
$(‘.sort‘).click(function(){
var arr=[];
for(var i=0;i<$(‘tbody tr‘).length;i++){
arr.push(parseInt($(‘tbody tr‘).eq(i).children().eq(2).text()));
};
for(var j=0;j<$(‘tbody tr‘).length;j++){
for(var k=j+1;k<$(‘tbody tr‘).length;k++){
if(arr[k]>arr[j]){
var tmp,temp;
temp=arr[k];
arr[k]=arr[j];
arr[j]=temp;
tmp=$(‘tbody tr‘).eq(j).html();
$(‘tbody tr‘).eq(j).html($(‘tbody tr‘).eq(k).html());
$(‘tbody tr‘).eq(k).html(tmp);
}
}
}
x_sort();
del();
})
/********************修改内容********************/
// $(‘.change‘).click(function(){
// for(var i=0;i<$(‘tbody tr‘).length;i++){
// $(‘tbody tr‘).children().attr(‘contenteditable‘,‘true‘);
// }
// $(‘.save‘).on(‘click‘,function(){
// $(‘tbody tr‘).children().removeAttr(‘contenteditable‘);
// })
// });
$(‘.change‘).click(function(){
var even=function(){
_self=$(this);
_self.attr(‘contenteditable‘,‘true‘);
}
for(var i=0;i<$(‘tbody tr‘).length;i++){
$(‘tbody tr‘).eq(i).children().on(‘click‘,even);
(function(i){
$(‘.save‘).on(‘click‘,function(){
$(‘tbody tr‘).children().attr(‘contenteditable‘,‘false‘);
$(‘tbody tr‘).children().off(‘click‘,even);
})
})(i);
}
})
</script>
javascript（原生js方法）：
<script type="text/javascript">
var add_btn = document.querySelector(".add");
var name_inp = document.querySelector(".name");
var age_inp = document.querySelector(".age");
var search_btn = document.querySelector(".sea");
var tbody = document.querySelector("table tbody");
var sort_btn = document.querySelector(".sort");
var change_btn = document.querySelector(".change");
var save_btn = document.querySelector(".save");
/*****************添加的功能**********************************/
add_btn.addEventListener(‘click‘, function() {
var add_name = name_inp.value;
var add_age = age_inp.value;
var trs = tbody.children;
if(add_name == ‘‘ || add_age == ‘‘) {
alert(‘请输入内容！‘);
} else {
tbody.innerHTML += "<tr><td>" + (trs.length + 1) + "</td><td>" + add_name + "</td><td>" + add_age + "</td><td><button class=‘del‘>删除</button></td></tr>"
del();
x_sort();
}
});
/********************删除的功能*************************************/
function del() {
var del_btn = document.querySelectorAll(".del");
for(var i = 0; i < del_btn.length; i++) {
del_btn[i].addEventListener("click", function() {
this.parentNode.parentNode.remove();
x_sort();
})
}
};
/***********************搜索功能************************************/
search_btn.addEventListener("click", function() {
var search_ipn = document.querySelector(".search");
var trs = tbody.children;
var dialog = document.querySelector(".dialog");
var kaiguan = true;
for(var i = 0; i < trs.length; i++) {
trs[i].style.cssText = "background: black; text-align: center; color: gold; height: 50px; width: 50px;";
if(trs[i].firstElementChild.nextElementSibling.textContent == search_ipn.value) {
trs[i].style.cssText = "background:gold;color:black; text-align: center;height: 50px; width: 50px;";
kaiguan = false;
}
}
if(kaiguan == false) {
dialog.innerHTML = ""
} else {
dialog.innerHTML = "找不到啊！你个傻逼！";
}
});
/*********************排序*****************************/
/*****序号排序********/
function x_sort() {
var trs = tbody.children;
for(var i = 0; i < trs.length; i++) {
trs[i].firstElementChild.innerHTML = i + 1;
}
};
/*************年龄排序****************/
sort_btn.addEventListener("click", function() {
var arr = [];
var trs = tbody.children;
for(var i = 0; i < trs.length; i++) {
arr.push(Number(trs[i].firstElementChild.nextElementSibling.nextElementSibling.textContent))
}
for(var j = 0; j < trs.length; j++) {
for(var k = j + 1; k < trs.length; k++) {
if(arr[k] < arr[j]) {
var tmp, temp;
tmp = arr[k];
arr[k] = arr[j];
arr[j] = tmp;
temp = trs[k].innerHTML;
trs[k].innerHTML = trs[j].innerHTML;
trs[j].innerHTML = temp;
}
}
}
// x_sort();
});
/********************修改内容********************/
change_btn.addEventListener("click", function() {
var trs = tbody.children;
var even = function() {
var _self = this;
_self.setAttribute("contenteditable", "true");
}
for(var i = 0; i < trs.length; i++) {
trs[i].firstElementChild.nextElementSibling.addEventListener("click", even);
(function(i) {
save_btn.addEventListener("click", function() {
trs[i].firstElementChild.nextElementSibling.setAttribute("contenteditable", "false");
trs[i].firstElementChild.nextElementSibling.removeEventListener("click", even);
})
})(i);
}
});
</script>
以上是关于浅谈表格（jq）的增删改查的主要内容，如果未能解决你的问题，请参考以下文章