首先这两天写的一个简单增删改查，基本上靠百度和自学，完成的这个作业。
里面的功能十分的简陋，对于有需要的朋友一点点帮助吧。
这不是一条通往项目的链接：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码：030a
里面有一些前期练习，如果心急，那就直接看index4.html吧，那是此次的网页实现，js文件放在js文件夹下。
然后，先给大家看看效果，因为没有写css美化，太过于难看，请见谅！
下面我讲解一下，我在这个作业中遇到的问题，相信初学者同样也会和我一样遇到这类问题。
首先你要弄懂innerHTML和innerText的区别，这个很容易就遇到问题。
innerHTML获取到的不只是文本，它得到的是标签对，相当于你获取一行代码吧。
innerText获取到却是纯文本，当然兼容性在这里并不涉及，想要更弄懂这其中缘由，自行百度。
以下是我出错地方：
需求是获取复选框后面文本，想当然用到百度，百度得到的代码也的确有用，而不是value值
第一个错误，实现依靠nextSibling.nodeValue得到文本值，但是得到的值，如果使用innerHTML获取，就会出现错误，下面进行比较判断很容易出错，这时应该用innerText，直接获取纯文本，进行比较。
//获取文本值
var selectedValue="";
for(var i=0;i<interests.length;i++){
if(interests[i].checked){
// nextSibling是获得当前对象的下一个对象
// nodeValue是返回一个节点的值
selectedValue=selectedValue+interests[i].value+" ";
// selectedValue=selectedValue+interests[i].nextSibling.nodeValue;
}
}第二个错误，当更新/修改值时，使用innerHTML或innerText似乎都会自动换行，这时你就用用到去除空格或者去除换行，防止出现错误，无法判断到值。
而我用到的是正则表达式，使用replace()匹配替换值。
去掉后面空格
str="abc ";
str=str.replace(/(\s*$)/g, "");
console.log(str);
去掉换行
str="abc/n/r";
str=str.replace(/[\r\n]/g,"");
console.log(str);
第三个错误，其实是我对代码不熟造成的，重置功能实现，每次对于点击修改回显数据时，第二次点击修改按钮回显数据，就会造成复选框以及单选框、下拉框不显示的错误，为了避免这个错误，应该每次点击前清空所有数据，然后在回显数据。
如果在后面重置，就会造成文本框内容变了，但是下拉框以及复选框，单选框都没变呐。
第四个错误，其实在修改更新时出现，原本我打算每次点击修改按钮后，将提交按钮隐藏，重新创建一个节点按钮，如果用户不乱点，看起来还一点毛病都没有，谁叫我手贱多点几下修改按钮，这新增的更新按钮如洪水般蔓延演化而出，咦，怎么把它只新增一次呢？扣了扣头，哥达鸭一愣，发现我解决不了，所以只好去百度取经，DOM节点的使用，也就弄明白setAttribute()这个方法原来是修改节点属性的东东，只好另辟蹊径改改提交按钮就ok了，汗颜！！！
第五个错误，也属于低级错误，哎，怎么老犯这么多错呢？对于JS的方法使用出现了致命错误。大一讲的JavaScript知识，似乎过了一年又全换回去了。这不老师又重新讲解一下，但是就前面的几个练习，还不足以然我想起曾经的知识。
这个错误居然是内部函数调用出错，一开始我使用的window.onload = function() {
document.getElementById(id).onclick = function() {
代码块
}
}
原本打算使用window.onload = function() {
function 方法名(){}
}
在按钮那边写个onclick=“方法名()”调用一下就行，结果出现整个方法没有调用，还一直报错，然后就又来到百度，搜啊搜啊，找到解决方案了，就写成了window.onload = function() {
del=function(obj){}
}这样，好像行得通，不管了先用再说。
结果不游细说，又出现一个跟这个相同的错误，什么？前面代码都没错，为什么修改回显就出错？岂有此理！！然后我就老实的百度，到最后还是我的同学，一针见血。原来方法是要写到外面去，才能调用，所以又浪费好长的时间，心痛自己。
第六个错误，其实不算错误，只是把我饶了一大圈，就比如
document.getElementById(id).onclick = function() {
代码块
}
这么写代码，可是呢？我在按钮一边就只写了name值，然后我调用了getElementsByName(name)这来实现点击事件，结果发现报错呢？什么原因我没有去查，不过好像这么写只有id值才能调用点击事件。
getElementsByTagName(标签)这个好像是获取所有选中的标签，好像是个集合，所以可以在后面直接加上【0】、【1】等这类，来简单处理一些问题。
下面就是功能解释：
首先讲解一下，具体实现的功能要求。
获取光标--------增加一条用户信息，同时显示在下方------重置----全选或选中部分删除--------单个删除------修改回显-------修改内容
以上就是个人完成的步骤。
下面直接先贴HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/js.js" ></script>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center">用户注册信息</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" id="user" style="width:150px" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="password" style="width:150px" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="place">
<option value="">请选择</option>
<option value="1">浙江</option>
<option value="2">河南</option>
<option value="3">北京</option>
<option value="4">重庆</option>
</select>
</td>
</tr>
<tr>
<td>兴趣</td>
<td>
<input type="checkbox" name="interest" value="篮球"/>篮球
<input type="checkbox" name="interest" value="足球"/>足球
<input type="checkbox" name="interest" value="书法"/>书法
<input type="checkbox" name="interest" value="音乐"/>音乐
<br>
<input type="checkbox" name="interest" value="绘画"/>绘画
<input type="checkbox" name="interest" value="散打"/>散打
<input type="checkbox" name="interest" value="瑜伽"/>瑜伽
<input type="checkbox" name="interest" value="其他"/>其他
</td>
</tr>
<tr>
<td>政治面貌 </td>
<td>
<input type="radio" name="identity"/>党员
<input type="radio" name="identity"/>团员
<input type="radio" name="identity"/>群众
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="submit" value="提交"/>
<input type="button" id="reset" value="重置" />
</td>
</tr>
</table>
<br /><br /><br /><br />
<div class="">
<table border="1" cellspacing="0" cellpadding="0" id="listTable">
<tr>
<td>选中</td>
<td>用户名</td>
<td>密码</td>
<td>籍贯</td>
<td>兴趣</td>
<td>政治面貌</td>
<td>操作</td>
</tr>
<tr>
<td>
<label>全选</label>
<input type="checkbox" name="item" onclick="checkAll(this);"/>
</td>
<td colspan="6" align="center">
<input type="button" value="选中删除" onclick="delRow();"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td>007</td>
<td>123456</td>
<td>浙江</td>
<td>书法 绘画 瑜伽</td>
<td>团员</td>
<td>
<input type="button" value="删除" onclick="del(this);"/>
<input type="button" name="update" value="修改" onclick="modify(this)"/>
</td>
</tr>
</table>
</div>
</body>
</html>
然后就是下面就是js代码，其中就不在细说，注释也有，自行查阅。
window.onload = function() {
var submits = document.getElementById("submit");
//获取焦点
document.getElementById('user').focus();
document.getElementById('user').select();
//增加
submits.onclick = function() {
//获取用户信息
var user = document.getElementById("user").value;
//获取密码
var password = document.getElementById("password").value;
//获取籍贯
var place = document.getElementById("place");
//获取索引
var index = place.selectedIndex;
//获取选中值
var placeValue = place.options[index].text;
//获取兴趣
var interests = document.getElementsByName("interest");
//获取value值
var selectValue="";
for(var i = 0; i < interests.length; i++) {
var interest = interests[i];
if(interest.checked==true) {
selectValue=selectValue+interest.value+",";
}
}
//获取文本值
var selectedValue="";
for(var i=0;i<interests.length;i++){
if(interests[i].checked){
// nextSibling是获得当前对象的下一个对象
// nodeValue是返回一个节点的值
selectedValue=selectedValue+interests[i].value+" ";
// selectedValue=selectedValue+interests[i].nextSibling.nodeValue;
}
}
selectedValue=selectedValue.replace(/(\s*$)/g, "");//去掉后面空格
var radioValue="";
var identitys=document.getElementsByName("identity");
for(var i=0;i<identitys.length;i++){
if(identitys[i].checked){
radioValue=radioValue+identitys[i].nextSibling.nodeValue;
}
}
//增加
add(user,password,placeValue,selectedValue,radioValue);
}
//重置
document.getElementById('reset').onclick=function(){
resets();
};
function add(user,password,placeValue,selectedValue,radioValue){
//创建一个框架节点
var tr =document.createElement("tr");
var td1 =document.createElement("td");
var td2 =document.createElement("td");
var td3 =document.createElement("td");
var td4 =document.createElement("td");
var td5 =document.createElement("td");
var td6 =document.createElement("td");
var td7 =document.createElement("td");
//赋值
//setAttribute：修改节点属性
var input1=document.createElement("input");
input1.setAttribute('type','checkbox');
input1.setAttribute('name','item');
td1.appendChild(input1);
//获取到的值进行赋值,innerHTML获取到的值会把标签同时获取
td2.innerHTML=user;
td3.innerHTML=password;
td4.innerHTML=placeValue;
td5.innerHTML=selectedValue;
td6.innerHTML=radioValue;
//操作添加
//创建一个input节点
var input2=document.createElement("input");
input2.setAttribute('type','button');
input2.setAttribute('value','删除');
input2.setAttribute('onclick','del(this)');
//追加节点
td7.appendChild(input2);
var input3=document.createElement("input");
input3.setAttribute('type','button');
input3.setAttribute('name','update');
input3.setAttribute('value','修改');
//添加修改事件
input3.setAttribute('onclick','modify(this)');
td7.appendChild(input3);
//将所有td标签对放入tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
var table=document.getElementById('listTable');
table.appendChild(tr);
//重置（方法）
resets();
}
//全选
checkAll=function (obj){
var checked=obj.checked;
var item=document.getElementsByName("item");
for(var i=0;i<item.length;i++){
if(item[i].checked){
item[i].checked=null;
}else{
item[i].checked=checked;
}
item[i].checked=checked;
}
}
//删除单项
del=function(obj){
var parentTr=obj.parentNode.parentNode;
var parentTable = parentTr.parentNode;
parentTable.removeChild(parentTr);
}
//删除选中
delRow=function(){
var items=document.getElementsByName("item");
for(var i=1;i<items.length;i++){
if(items[i].checked){
var parentNode=items[i].parentNode.parentNode;
var tables=parentNode.parentNode;
tables.removeChild(parentNode);
i--;
}
}
}
}
var rowIndex;
//修改回显
function modify (obj){
//重置
resets();
//获取
var user=document.getElementById('user');
var password = document.getElementById("password");
var place = document.getElementById("place");
var index = place.selectedIndex;
var placeValue = place.options[index].text;
//获取tr和td对，以及选中的下标
var tr = obj.parentNode.parentNode;
var td = tr.getElementsByTagName('td');
rowIndex=obj.parentNode.parentNode.rowIndex;
//赋值
user.value=td[1].innerHTML;
password.value=td[2].innerHTML;
placeValue=td[3].innerHTML;
for(var i=0;i<place.options.length;i++){
var value= place.options[i].text;
if(value==placeValue){
place.options[i].selected=true;
}
}
var interValue=td[4].innerHTML;
var str= interValue.split(" ");
var interests = document.getElementsByName("interest");
for(var i=0;i<str.length;i++){
for (let j=0;j<interests.length;j++) {
if(interests[j].value==str[i]){
interests[j].checked=true;
}
}
}
var identitys=document.getElementsByName("identity");
//这里更新到的值会出现换行，造成字符串无法比较
var identValue=td[5].innerText;
identValue=identValue.replace(/[\r\n]/g,"");//去掉换行符
if(identValue=="党员"){
identitys[0].checked=true;
}else if(identValue=="团员"){
identitys[1].checked=true;
}else if(identValue=="群众"){
identitys[2].checked=true;
}
//回显完毕后，修改按钮事件
var addButton=document.getElementById('submit');
try{
if(addButton.getAttribute("value")=="提交"){
addButton.setAttribute('value','更新');
addButton.setAttribute('id','update');
addButton.setAttribute('onclick','update()');
}
}catch(e){
//TODO handle the exception
}
}
//修改
function update(){
//获取
var table=document.getElementById('listTable');
var user=document.getElementById('user');
var password = document.getElementById("password");
var place = document.getElementById("place");
var index = place.selectedIndex;
var placeValue = place.options[index].text;
var interests = document.getElementsByName("interest");
//获取文本值
var selectedValue="";
for(var i=0;i<interests.length;i++){
if(interests[i].checked){
selectedValue=selectedValue+interests[i].value+" ";
}
}
//去掉末尾空格
selectedValue=selectedValue.replace(/(\s*$)/g, "");
var radioValue="";
var identitys=document.getElementsByName("identity");
for(var i=0;i<identitys.length;i++){
if(identitys[i].checked){
radioValue=radioValue+identitys[i].nextSibling.nodeValue;
}
}
//赋值
table.rows[rowIndex].cells[1].innerHTML=user.value;
table.rows[rowIndex].cells[2].innerHTML=password.value;
table.rows[rowIndex].cells[3].innerHTML=placeValue;
table.rows[rowIndex].cells[4].innerHTML=selectedValue;
table.rows[rowIndex].cells[5].innerText=radioValue;
//更新成功后，将按钮改回原来按钮，同时重置
var updateButton=document.getElementById('update');
updateButton.setAttribute('value','提交');
updateButton.setAttribute('type','button');
updateButton.setAttribute('id','submit');
updateButton.setAttribute('onclick','add()');
resets();
}
//重置
function resets(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=='text'){
inputs[i].value="";
}else if(inputs[i].type=='password'){
inputs[i].value="";
}else if(inputs[i].type=='checkbox'){
if(inputs[i].checked){
inputs[i].checked=false;
}
}else if(inputs[i].type=='radio'){
if(inputs[i].checked){
inputs[i].checked=false;
}
}
}
//重置下拉框
var place=document.getElementById('place');
place.selectedIndex=0;
//获取焦点
document.getElementById('user').focus();
}
ok，希望各位有一定收获。