js增删查改

    本周花费大量时间做专业作业外，完成了我的第一个JavaScript怎删改查任务。有所心得：

    js以var申明所有形式的变量，变量可随时赋值，变量生存期与C语言变量生存期相似，js主要通过查找文档唯一id名来锁定目标，锁定目标后可用js专用语言对目标进行一系列操作：改变样式、更换内容、设置动画等。

    增删查改功能主要通过以下几个函数实现：

    1.增加函数：table为全局变量指向table标签，table.insertRow（i）为在table中的第i位置插入一行，row.insertCell(i)为在行row的第i位置插入一列。document.getElementById("table1").rows.length 为获取table标签中已有的行数。document.getElementById("add1").value为获取输入框id为add1的内容。document.getElementById("add4").selectedIndex.options[i].text为获取selecttedIndex中第i个元素的内容。

function add(flag){
			var row = table.insertRow(-1);           
			var ad1 = row.insertCell(0);
			var ad2 = row.insertCell(1);
			var ad3 = row.insertCell(2);
			var ad4 = row.insertCell(3);
			var ad5 = row.insertCell(4);
			var ad6 = row.insertCell(5);
			ad1.innerHTML = document.getElementById("table1").rows.length - 1;
			ad2.innerHTML = document.getElementById("add1").value;
			ad3.innerHTML = document.getElementById("add2").value;
			ad4.innerHTML = document.getElementById("add3").value;
			var tall = document.getElementById("add4");
			var pwd = tall.selectedIndex;
			var option = tall.options[pwd];
			ad5.innerHTML = option.text;
			ad6.innerHTML = "<input type='button' value='修改' οnclick='updateRow(this)'><input type='button' value='删除' οnclick='deleteDate(this)'>";
			alert("添加成功!!");
		}

   2.删除函数：input.parentNode.parentNode.rowIndex为input的父元素在table中行的位置，deleteRow(s)为删除第s行内容。for循环将被删除行之下的行序号减一。

1. function deleteDate(input){
   			var s = input.parentNode.parentNode.rowIndex;
   			document.getElementById("table1").deleteRow(s);
   			var num=document.getElementById("table1").rows.length;  
            	for(var i=1;i<num;i++)  
                table.rows[i].cells[0].innerHTML = i;         
   			alert("删除成功!!!");
   		} 
   

    3.查找函数：穷举法遍历表中所有单元格内的内容，当找到目标内容后，改变该单元格颜色。

function search(){
		var x = table.rows.length;
		var sear = document.getElementById("chazhao").value;
		for (var i = 1; i < x; i++) {
				if (table.rows[i].cells[1].innerHTML == sear) {
					table.rows[i].cells[1].style.backgroundColor = "#CC00FF";
				}
			}	
	}

    4.修改函数：.disabled = true;disabled的值设为true时，目标值将无法选定修改。.style.display = "block";display的值默认为block，意为显示，值为none时将隐藏该块。当调用修改函数，修改好值后，通过增加函数刷新表格中的值。

function updateRow(input){
		flag = true;
		document.getElementById("add1").disabled = true;
		document.getElementById("addDate2").style.display = "block";		
		var i = input.parentNode.parentNode.rowIndex;
		getSelectRow = i;
		document.getElementById("add1").value = table.rows[i].cells[1].innerHTML;
		document.getElementById("add2").value = table.rows[i].cells[2].innerHTML;
		document.getElementById("add3").value = table.rows[i].cells[3].innerHTML; 
		var select = document.getElementById("add4");
		var option = select.selectedIndex;
		option.text = table.rows[i].cells[4].innerHTML;
	}

以上便是本周对js的收获。