不能重復(fù)ID和電話
CSS部分
<style>
table {
width: 600px;
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
}
tr,
th,
td {
border: 1px solid #000;
}
tbody input {
width: 90%;
border: none;
outline: none;
}
input {
outline: none;
}
</style>
html部分
<div>
<p><input type="text" id="sId" placeholder="ID"></p>
<p><input type="text" id="sName" placeholder="姓名"></p>
<p><input type="text" id="sTel" placeholder="電話"></p>
<p><button id="save">保存</button></p>
<input type="text" id="txt">
<button id="search">搜索</button>
<table>
<thead>
<tr>
<th>id</th>
<th>電話</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tab"></tbody>
</table>
</div>
JavaScript部分
<script>
var oId = document.getElementById("sId");//ID
var oName = document.getElementById("sName");//姓名
var oTel = document.getElementById("sTel");//綁定電話
var oTxt = document.getElementById("txt");//綁定search輸入框
var oSearch = document.getElementById("search");//search按鈕
var oSave = document.getElementById("save");//保存按鈕
var oTab = document.getElementById("tab");//表格
//1.模擬一些初始數(shù)據(jù),用來(lái)對(duì)比防止重復(fù)
var data = [{
id: 1,
name: "劉德華",
tel: 17485247895
},
{
id: 2,
name: "周星馳",
tel: 17485247295
}]
//調(diào)用加載顯示存儲(chǔ)在data對(duì)象里面的函數(shù)
loadData(data);
//2.點(diǎn)擊保存按鈕,輸入框的數(shù)據(jù),做成一個(gè)對(duì)象,
// 把該對(duì)象添加到模擬數(shù)據(jù)里
oSave.onclick = function () {
var obj = {
id: oId.value,
name: oName.value,
tel: oTel.value
}
//在保存的時(shí)候,拿 obj里的id與 模擬數(shù)據(jù)里的id繼續(xù)比較
//id與電話號(hào)碼不能重復(fù)
var isReg = data.some(function (item) {
return item.id == obj.id || item.tel == obj.tel;
})
//判斷isReg
if (isReg) {
return;
}
data.push(obj);
loadData(data);
}
//3.把加載的數(shù)據(jù)顯示出來(lái)
function loadData(arr) {
//判斷輸入的數(shù)據(jù)是否為數(shù)組格式
if (!Array.isArray(arr)) {
return;
}
var strHtml = "";
arr.forEach(function (item) {
strHtml += `
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.tel}</td>
<td>
<a href="javascript:void(0)" onclick=del(this,${item.id})>刪除</a>
<a href="javascript:void(0)" onclick=edit(this,${item.id})>編輯</a>
<a href="javascript:void(0)" style="display:none" onclick=save(this,${item.id})>保存</a>
</td>
`
});
oTab.innerHTML = strHtml;
}
//4.定義刪除函數(shù)
function del(o, id) {
//1.//1.先根據(jù)id找出模擬數(shù)據(jù)里的 對(duì)應(yīng)數(shù)據(jù)
var findIndex = -1;
data.forEach(function (item, index) {
if (item.id == id) {
findIndex = index;
}
})
//根據(jù)下標(biāo)刪除
data.splice(findIndex, 1);
//刪除頁(yè)面結(jié)構(gòu)tr
o.parentNode.parentNode.remove();
}
//5.定義一個(gè)搜索功能
oSearch.onclick = function () {
//1.先獲取到搜索輸入框的值
var strName = oTxt.value;
//2.拿strName 與模擬的數(shù)據(jù),進(jìn)行過(guò)濾
var newData = data.filter(function (item) {
return item.name.indexOf(strName) != -1;
})
//加載顯示的數(shù)據(jù),innerHTML會(huì)覆蓋之前的數(shù)據(jù)
loadData(newData)
}
//6.定義一個(gè)編輯功能 函數(shù)
function edit(o, id) {
o.style.display = "none";
//edit的a標(biāo)簽下一個(gè)標(biāo)簽保存顯示出來(lái),加上括號(hào)就不用重新定義一個(gè)對(duì)象賦值
(o.nextElementSibling || o.nextSibling).style.display="inline-block";
// 拿到用戶名的td里頭 插入一個(gè)input
//先取值 劉德華
var strName=o.parentNode.parentNode.children[1].innerText;
//把劉德華放入到一個(gè) 輸入框里,在把輸入框插入到 第2個(gè)td里
o.parentNode.parentNode.children[1].innerHTML=`<input value=${strName}>`;
//取出電話號(hào)碼
var strTel=o.parentNode.parentNode.children[2].innerText;
o.parentNode.parentNode.children[2].innerHTML=`<input value=${strTel}>`;
}
//保存 功能函數(shù)定義
function save(o,id){
o.style.display="none";//save的a隱藏
//edit的a顯示
(o.previousElementSibling||o.previousSibling).style.display="inline-block";
// 1.根據(jù)id找到下標(biāo),在于對(duì)應(yīng)下標(biāo)的地方,把輸入的值,覆蓋模擬數(shù)據(jù)里某對(duì)象的數(shù)據(jù)
var findIndex=-1;
data.forEach(function(item,index){
if(item.id==id){
findIndex=index;
}
})
data[findIndex].name=o.parentNode.parentNode.children[1].children[0].value;
data[findIndex].tel=o.parentNode.parentNode.children[2].children[0].value;
//把輸入的內(nèi)容,利用innerHTML 覆蓋原來(lái)的 input框
o.parentNode.parentNode.children[1].innerHTML=data[findIndex].name;
o.parentNode.parentNode.children[2].innerHTML=data[findIndex].tel;
}
</script>
