<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
outline: none;
}
table{
width: 600px;
margin: 0 auto;
text-align: center;
border: 1px solid #333333;
/*合并表格边框属性*/
border-collapse: collapse;
}
td,th{
height: 40px;
border: 1px solid #333333;
}
div{
width: 600px;
margin: 20px auto;
/*默认条件下div隐藏*/
display: none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>jon1</td>
<td>15239111596</td>
<td>
<button class="del">删除1</button>
<button class="ref">修改</button>
</td>
</tr>
<tr>
<td>jon2</td>
<td>13223009270</td>
<td>
<button class="del">删除2</button>
<button class="ref">修改</button>
</td>
</tr>
<tr>
<td>jon3</td>
<td>15093773181</td>
<td>
<button class="del">删除3</button>
<button class="ref">修改</button>
</td>
</tr>
</tbody>
</table>
<div id="content">
<input type="text">
<input type="text">
<button class="confirm">确认修改</button>
<button class="cancel">取消</button>
</div>
</body>
<script>
var TB = document.getElementsByTagName('tbody')[0];
var myContent = document.getElementById('content');
// 给tbody绑定点击事件(事件委托)
TB.onclick = function (e) {
// 如果当前点击的是删除按钮
if (e.target.className == 'del') {
// 弹出一个询问框,并用x接收返回值 ----
// 询问框返回值只有两个 点击确认:true 点击取消:false
var x = confirm('确认删除吗?');
if (x) {
// e.target 为当前点击对象--->删除
// e.target.parentElement ---> td
// e.target.parentElement.parentElement ---> tr
console.log("获取值:"+e.target.parentElement.parentElement.children[2].children[0].innerText)
TB.removeChild(e.target.parentElement.parentElement);
}else{
TB.removeChild();
}
}
// 如果当前点击的是修改按钮
if(e.target.className == 'ref'){
// 下面的div要显示出来
myContent.style.display = "block";
// 给每一个输入框赋初始值
/* 这是让 myContent.children[0] 第一个输入框的value(输入框中显示的字为姓名)
e.target.parentElement.parentElement ---> tr
e.target.parentElement.parentElement.children[0] ---> tr的第一个子节点,即姓名所在的td
*/
myContent.children[0].value = e.target.parentElement.parentElement.children[0].innerText;
// 这与第一个原理如出一辙
myContent.children[1].value = e.target.parentElement.parentElement.children[1].innerText;
// 给div绑定点击事件(事件委托),这里形参用ev是为了区别上面的e
myContent.onclick = function(ev){
// 如果点击的是确认修改
if (ev.target.className == 'confirm') {
// 下面的div要隐藏起来
myContent.style.display = "none";
// 点击了确认修改就把文本框的value值赋值给对应td的文本
e.target.parentElement.parentElement.children[0].innerText = myContent.children[0].value;
e.target.parentElement.parentElement.children[1].innerText = myContent.children[1].value;
}
// 如果点击的是取消,下面的div同样要隐藏,之所以这样写,是因为只有点击这两个按钮才会执行隐藏操作
if (ev.target.className == 'cancel') {
myContent.style.display = "none";
}
}
}
}
</script>
</html>
js获取table中某一行数据
该博客展示了如何使用HTML、CSS和JavaScript实现表格数据的删除和编辑功能。通过事件委托,当用户点击删除或修改按钮时,会触发相应的操作,如弹出确认删除的对话框或显示用于编辑的输入框。用户可以对表格中的姓名和手机号进行修改,点击确认后更新表格内容,点击取消则不保存修改。
摘要由CSDN通过智能技术生成