純JS+HTML簡單表格增刪改查
阿新 • • 發佈：2019-01-30
首先這兩天寫的一個簡單增刪改查，基本上靠百度和自學，完成的這個作業。
裡面的功能十分的簡陋，對於有需要的朋友一點點幫助吧。
這不是一條通往專案的連結：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，希望各位有一定收穫。