<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var dateObj, nameObj, jobObj, moneyObj, trObj = null,delbuttonObj;
window.onload = function () {
dateObj = document.getElementById("date");
nameObj = document.getElementById("name");
jobObj = document.getElementById("job");
moneyObj = document.getElementById("money");
delbuttonObj=document.getElementById("delbutton");
var trArray = dateObj.getElementsByTagName("tr");
for (var i = 0; i < trArray.length; i++) {
trArray[i].onclick = function () {
trClick(this);
}
}
}
//添加点击事件
function trClick(clickObj) {
if (trObj != null) {
trObj.style.backgroundColor = "white";
}
clickObj.style.backgroundColor = "red";
trObj = clickObj;
delbuttonObj.disabled=false;
//得到点中中td元素集合
var tdArray=trObj.getElementsByTagName("td");
nameObj.value=tdArray[0].innerHTML;
jobObj.value=tdArray[1].innerHTML;
moneyObj.value=tdArray[2].innerHTML;
}
//添加
function add() {
//创建tr元素对象
var trObjs = document.createElement("tr");
//设置tr元素中间的内容
trObjs.innerHTML = `<td>${nameObj.value}</td><td>${jobObj.value}</td><td>${moneyObj.value}</td>`;
//给新添元素添加事件
trObjs.onclick = function () {
trClick(this);
//在父元素上追加子元素
dateObj.appendChild(trObjs);
}
}
function del() {
// if(trObj!=null){
// trObj.remove();
// trObj=null;
// alert("删除成功");
// }else{
// alert("请选中一行");
// }
trObj.remove();
delbuttonObj.disabled=true;
}
function update(){
var tdArray=trObj.getElementsByTagName("td");
tdArray[0].innerHTML=nameObj.value;
tdArray[1].innerHTML=jobObj.value;
tdArray[2].innerHTML=moneyObj.value;
nameObj.value="";
}
</script>
</head>
<body>
<div style="display: flex;">
<table border="1" width="50%" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工资</th>
</tr>
</thead>
<tbody id="date">
<tr>
<td>张三</td>
<td>经理</td>
<td>12000</td>
</tr>
<tr>
<td>李四</td>
<td>大厅主任</td>
<td>15000</td>
</tr>
<tr>
<td>王五</td>
<td>会计</td>
<td>9000</td>
</tr>
<tr>
<td>赵六</td>
<td>业务员</td>
<td>6000</td>
</tr>
<tr>
<td>田七</td>
<td>销售</td>
<td>3000</td>
</tr>
<tr>
<td>奥里给</td>
<td>清洁工</td>
<td>2000</td>
</tr>
<tr>
<td>魏九</td>
<td>助理</td>
<td>2500</td>
</tr>
</tbody>
</table>
<div style="width: 300px; height: 100px; margin-left: 10px;">
姓名：<input type="text" id="name"><br>
职位：<input type="text" id="job"><br>
工资：<input type="text" id="money"><br>
<input type="button" value="添加" onclick="add()">
<input type="button" value="删除" onclick="del()" id="delbutton" disabled>
<input type="button" value="修改" onclick="update()">
</div>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
