DOM的增删改查

JavaScript分为了三个大块，ECMAScript、BOM、DOM，其中的DOM能够去操作html。所谓操作，无非是在最基础的增删改查上延展，所以增删改查显得非常重要。
这里我用一个简易的数据管理系统进行分析，当然，这个数据管理系统没有连接数据库，直接存在内存中。
系统要求：

1. 能够接受用户输入新数据，往页面中添加。
2. 能够对单行数据进行删除，当然也能够对选中的多行数据进行删除。
3. 能够对单行数据进行修改。
4. 能够对数据进行查询，其中包括条件查询，全部查询。

基本思路：四种数据无非是对数据进行一次结构修改或者内容修改，然后再重新展示的过程，所以我们的操作可以直接对原数据进行操作，再写入界面。

增

这里没有连接数据库，我直接在js中直接创建了一个数组当做原始数据使用。
增加操作流程：

1. 用户点击添加按钮，弹出添加界面。
2. 用户输入数据，单击确认按钮。
3. 接收到用户输入的数据，插入到原始数据的指定位置中。
4. 调用更新table的方法更新网页页面。

// 找到添加数据按钮
document.getElementById('insert').onclick = function(){
	document.getElementById('null').className = 'hide'
	// 弹出隐藏框接受用户输入数据
	document.getElementById('hide').className = 'show'
	// 获取到div框的input集合
	var elems = document.forms[0].elements
	elems[0].value = ''
	elems[1].checked = ''
	elems[2].value = ''
	elems[3].value =  ''
	elems[4].value = ''
	elems[7].value = ''
	elems[8].value = ''
}

删

删除分为两种删除，第一种是直接在某一行直接操作这一行，还是中通过复选框按钮选中多个，同时删除。
删除操作流程：

1. 用户点击删除按钮。
2. 找到数据对应的位置
3. 删除数据
4. 调用更新table的方法更新网页页面。

// 获取到删除选中项按钮
// 绑定单击事件
document.getElementById('delchk').onclick = function(){
	// 获取到已经选中的单选框
	var chkeds = tab.querySelectorAll('table tbody>tr>td:first-child input:checked')
	// 询问用户是否确认删除
	if(chkeds.length != 0 && confirm('确定要删除吗？')){
		// 将选中的数据存入新数组
		for(var i = chkeds.length - 1; i >= 0 ; i--){
			datadel.unshift(data[chkeds[i].parentNode.rowIndex - 1])
			// 删除data里面的数据
			data.splice(chkeds[i].parentNode.parentNode.rowIndex - 1, 1)
		}
		// 调用全部查询方法
		insertTbody(data)
	}
}

改

修改操作与增加操作大致相同，区别在于虽然也相当于出现了一个新数据，但数据量是不变的，所以需要删除之前的数据，再插入新数据，这里为什么要这么麻烦呢？因为修改也是需要用户输入数据的，所以我们可以借用之前增加的弹框，但是添加框会加入新数据，所以我们只要去除旧数据就能实现修改功能。
修改流程：

1. 用户点击修改按钮，弹出接受用户输入信息的框
2. 获取这一行的数据放入信息框中，供用户修改
3. 删除原数据中的这一行数据
4. 用户点击确定按钮，添加数据。
5. 调用更新table的方法更新网页页面。

tr.getElementsByTagName('button')[1].onclick = function(){
	// 删除当前行的数据
	data.splice(this.parentNode.parentNode.rowIndex - 1, 1)
	// 弹出隐藏框接受用户输入数据
	document.getElementById('hide').className = 'show'
	// 隐藏框接受当行的数据
	// 获取到父节点的格子集
	var drs = this.parentNode.parentNode.cells
	// 获取到div框的元素集合
	var elems = document.forms[0].elements
	elems[0].value = drs[1].innerHTML
	elems[1].value == drs[3].innerHTML ?  elems[1].checked = true : elems[2].value == drs[3].innerHTML ? elems[2].value = true : ''
	elems[3].value = drs[2].innerHTML 
	elems[4].value = drs[4].innerHTML
	elems[7].value = drs[6].innerHTML
	elems[8].value = drs[7].innerHTML
}

查

查询分为全部查询和条件查询，全部查询可以直接调用更新table方法即可完成，条件查询多了一个获取条件根据条件去省城新数组的过程。
查询流程：

1. 用户单击查询。
2. 获取到用户查询的相关数据
3. 调用更新table的方法更新网页页面。

// 找到条件查询按钮
// 绑定单击事件
document.getElementById('where').onclick = function(){
	// 找到用户想要查询的值
	var sex = document.getElementsByName('ssex')
	var val1 = sex[0].checked ? '男' : sex[1].checked ? '女' : ''
	var val2 = document.getElementById('sname').value
	var whedata = []
	// 遍历data中的值与条件查询的条件进行比较
	for(var i = 0; i < data.length; i++){
		// 两种查询值得基础值是true
		var bool1 = true, bool2 = true
		// 如果第一个查询值不为空，则进行查询第一个条件
		if(val1 !== ''){
			// 如果当前循环的sex和查询值相等，记录bool1为true
			bool1 = data[i][2] == val1
		}
		// 如果第二个查询值不为空，则进行查询第一个条件
		if(val2 !== ''){
			var reg = new RegExp(val2)
			// 如果当前循环的name和查询值相等，记录bool2为true
			bool2 = reg.test(data[i][0])
		}
		// 将符合条件的数据存入一个新数组
		if(bool1 && bool2){
			whedata.push(data[i])
		}
	}
	// 如果新数组里面有值
	if(whedata.length != 0){
		// 将值写入表格中
		insertTbody(whedata)
	}else{
		insertTbody(whedata)
		document.getElementById('null').className = 'show'
	}
}

用到的重要公共方法

// 添加Data数据的方法
function insertData(newdata){
	if(newdata[5] == ''){
		data.unshift(newdata)
		return
	}
	// 按照入职时间获得插入该行数据的位置
	for(var i = 0; i < data.length; i++){
		// 如果newdata的大于等于循环当前值
		if(countTime(newdata[5]) >= countTime(data[i][5])){
			// 插入数据
			data.splice(i, 0 , newdata)
			// 结束循环
			break
		}
		// 如果比最后一个小直接插到最后
		if(countTime(newdata[5]) < countTime(data[data.length - 1][5])){
			data.push(newdata)
			break
		}	
	}
}


// 计算入职时间的方法
function countTime(time){
	return parseInt(time.split('/').join(''))
}


// 写入数据方法
function insertTbody(data){
	document.getElementById('null').className = 'hide'
	// 获取到table
	tab = document.getElementsByTagName('table')[0]
	// 清除页面数据
	tab.removeChild(document.querySelector('tbody'))
	// 创建tbody
	var tbody = tab.createTBody('tbody')
	
	// 遍历传入数组
	for(var i = 0; i < data.length; i++){
		// 创建tr
		var tr = tbody.insertRow()
		// 添加单选框
		var chkone = document.createElement('input')
		chkone.type = 'checkbox'
		// 为单选框添加单击事件
		chkone.onclick = function(){
			if(!this.checked){
				// 将chbAll属性设置为false
				chkAll.checked = false;
			}else{
				if(chks.length === 0){
					chkAll.checked = true;
				}else{
					chkAll.checked = false;
				}
			}
		}
		tr.insertCell().appendChild(chkone)
		for(var j = 0; j < data[i].length; j++){
			// 依次加入data中的数据
			tr.insertCell().innerHTML = data[i][j]
		}
		// 添加操作按钮
		tr.insertCell().innerHTML = '删除 修改'
		// 给操作按钮绑定事件
		tr.getElementsByTagName('button')[0].onclick = function(){
			// 找到要删除的行
			var parent = this.parentNode.parentNode	
			// 询问用户是否确认删除
			if(confirm('是否删除' + parent.cells[1].innerHTML)){
				datadel.unshift(data[parent.rowIndex - 1])
				// 找到父元素的父元素节点，通过rowIndex属性删除这一行
				data.splice(parent.rowIndex - 1 , 1)
				insertTbody(data)
			}
			// 删除data中的数据
			// 展示新表格
		}
		tr.getElementsByTagName('button')[1].onclick = function(){
			// 删除当前行的数据
			data.splice(this.parentNode.parentNode.rowIndex - 1, 1)
			// 弹出隐藏框接受用户输入数据
			document.getElementById('hide').className = 'show'
			// 隐藏框接受当行的数据
			// 获取到父节点的格子集
			var drs = this.parentNode.parentNode.cells
			// 获取到div框的元素集合
			var elems = document.forms[0].elements
			elems[0].value = drs[1].innerHTML
			elems[1].value == drs[3].innerHTML ?  elems[1].checked = true : elems[2].value == drs[3].innerHTML ? elems[2].value = true : ''
			elems[3].value = drs[2].innerHTML 
			elems[4].value = drs[4].innerHTML
			elems[7].value = drs[6].innerHTML
			elems[8].value = drs[7].innerHTML
		}
		// 将这一行添加到tbody中
		tbody.appendChild(tr)
		var chkAll = document.getElementById('chkAll')
		var chks = document.querySelectorAll('table>tbody td:first-child>input:not(:checked)');
		if(chks.length === 0){
			chkAll.checked = true;
		}else{
			chkAll.checked = false;
		}
	}
}