jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选

index.js

/*
* 1.通过表单，可以添加数据到表格中显示
* 2.id自动根据已有的最大id值进行累加，删除一条记录的时候
* 3.隔行变色，新增加的行应该也需要隔行变色的
* 4.鼠标移入高亮
* 5.全选/全不选（checkAll和下面的每一个checkbox是有关联的）
* 6.选中变色
* 7.上移/下移
* 8.删除
*
* 9.选做：排序
* */

var data = [
    {
        id: 1,
        name : '小明',
        sex : '男',
        age : 11
    },
    {
        id: 2,
        name : '小子',
        sex : '男',
        age : 13
    },
    {
        id: 3,
        name : '小红',
        sex : '女',
        age : 15
    }
];

function changeColor(){
    var trs = tab1.getElementsByTagName('tr');
    for(var i=0;i<trs.length;i++){
        if(i%2){
            trs[i].udColor='color1';
        }else{
            trs[i].udColor='color2';
        }

        if(trs[i].cells[0].children[0].checked == false){
            if(i%2){
                trs[i].className='color1';
            }else{
                trs[i].className='color2';
            }
        }else{
            trs[i].className = "sel";
        }
    }
}

/*
一1.通过表单，可以添加数据到表格中显示
*/
function creatTr(n){
//          var tbody = document.getElementById('tbody');
    var tr = document.createElement('tr');
    //crearte (创造 制造)
    var inp = document.createElement('input');
    inp.type="checkbox";
/*
 四  选中变色
*/
/*
五   如果,这个checkbox是 取消的,则把全选框取消
    如果,这个checkbox是 选中的,开一个for循环，循环所有的checkbox如果有一个checkbox是未被选中的，则取消全选，停止for循环，如果for循环执行结束了，说明全被选中的，把全选勾上
 */
inp.onclick = function(){
    if(inp.checked){
        tr.className = "sel";
        var trs = tab1.getElementsByTagName("tr");
        for(var i = 0; i<trs.length;i++){
            if(!trs[i].cells[0].children[0].checked){
                checkAll.checked = false;
                return;
            }
        }
        checkAll.checked = true;
    }else{
        tr.className = "hover";
        checkAll.checked = false;
    }
}
var inp1 = document.createElement('input');
var inp2 = document.createElement('input');
var inp3 = document.createElement('input');
inp1.type ="button";
inp2.type ="button";
inp3.type ="button";
inp1.value = "上移";
inp2.value = "下移";
inp3.value = "删除";
//          console.log(inp);
var td1 =document.createElement('td');
td1.appendChild(inp);
tr.appendChild(td1);
var td2 =document.createElement('td');
td2.innerHTML = data[n].id;
tr.appendChild(td2);
var td3 =document.createElement('td');
td3.innerHTML = data[n].name;
tr.appendChild(td3);
var td4 =document.createElement('td');
td4.innerHTML = data[n].sex;
tr.appendChild(td4);
var td5 =document.createElement('td');
td5.innerHTML = data[n]. age;
tr.appendChild(td5);
var td6 =document.createElement('td');
/*
上移/下移
点击 上移/下移 按钮
让tr进行DOM节点操作
上移,让tr插入到tr的上一个兄弟节点前
下移,让tr下一个兄弟节点插入到tr的前面
执行changeColor函数
重新修正元素的本色
注意:删除的时候也需要调用changeColor
*/
td6.appendChild(inp1);//上移
inp1.onclick = function (){
    if(tr.previousElementSibling){
        tab1.insertBefore(tr,tr.previousElementSibling);
    }
    changeColor();
}

td6.appendChild(inp2);//下移
inp2.onclick = function (){
    if(tr.nextElementSibling){
        tab1.insertBefore(tr.nextElementSibling,tr);
    }
    changeColor();
}

td6.appendChild(inp3);  //删除
/*
删除
点击删除按钮,
把同时生成的tr删除
看看是不是当前已经是全选状态了,处理checkAll
*/
inp3.onclick = function (){
    tab1.removeChild(tr);
    changeColor();
    var trs = tab1.getElementsByTagName('tr');
    for(var i = 0; i<trs.length ; i++){
        if(!trs[i].cells[0].children[0].checked){
            checkAll.checked=false;
            return;
        }
    }
    checkAll.checked = true;
}
tr.appendChild(td6);
/*
三   鼠标移入高亮
鼠标移入tr的时候
    看tr中的checkbox是不是被选中的
        如果未被选中,变色(.hover)

鼠标移出tr的时候
    看tr中的checkbox是不是被选中的
        如果未被选中,变回本色(从自定义属性中找)
*/
tr.onmouseover = function(){
        if(!inp.checked){ //看当前的checked是否选中状态
            tr.className='hover';//未选中则变移入事件颜色
        }
    }
tr.onmouseout = function(){
        if(!inp.checked){//看当前的checked是否选中状态
            tr.className=this.udColor; //未选中则返回原本颜色
        }
    }
    checkAll.checked = false;
    tab1.appendChild(tr);
}

//点击全选
checkAll.onclick = function(){
	var trs = tab1.getElementsByTagName('tr');
	if(checkAll.checked){
		for(var i = 0; i<trs.length;i++){
			trs[i].cells[0].children[0].checked =true;
		}
	}else{
		for(var i = 0; i<trs.length;i++){
			trs[i].cells[0].children[0].checked = false;
		}
	}
	changeColor();
}
var form1 = document.getElementById('form1');
var tab1 = document.getElementById('tab1').tBodies[0];
var formBnt = form1.getElementsByClassName('formBnt')[0];
var checkedAll = document.getElementById('ckeckedAll');

	var num = data.length;
for(var i = 0; i< data.length;i++){
	creatTr(i);
}
changeColor();

formBnt.οnclick= function(){
	//判断信息是否符合
	if(form1.username.value==""||form1.sex.value==""||form1.age.value==""){
		alert("请输入完整信息");
		return;
	}
	//信息符合
	num++;
	data.push({
		id: num,
        name : form1.username.value,
        sex : form1.sex.value,
        age :form1.age.value
	});
	creatTr(data.length-1);

	changeColor();
}

/*七 升序降序*/
var sort = document.getElementById('sort');
sort.onclick = function (){
	if(form1.orderName.value==""||form1.orderBy.value==""){
		alert("请输入正确的排序");
		return;
	}
	bubbleSort(form1.orderName.value,form1.orderBy.value);
	changeColor();
}

function bubbleSort(orderName,orderBy){
	console.log(tab1);
	var trs = tab1.getElementsByTagName('tr');
	for(var i = 0; i<trs.length-1; i++){
		for(var j =0; j<trs.length-i-1;j++){
			if(orderName=="id"){
				var v1 = Number(trs[j].cells[1].innerHTML);
				var v2 = Number(trs[j+1].cells[1].innerHTML);
			}
			if(orderName=="age"){
				var v1 = Number(trs[j].cells[4].innerHTML);
				var v2 = Number(trs[j+1].cells[4].innerHTML);
			}

			if(orderBy=="asc"){
				if(v1>v2){
					console.log(tab1.insertBefore(trs[j+1],trs[j]))

				}
			}
			if(orderBy=="desc"){
				if(v1<v2){
					tab1.insertBefore(trs[j+1],trs[j]);
				}
			}
		}
	}
}