js获取table中某一行数据

最新推荐文章于 2024-06-21 14:23:45 发布

ヾ凉秋

最新推荐文章于 2024-06-21 14:23:45 发布

阅读量6.1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45498460/article/details/124153284

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客展示了如何使用HTML、CSS和JavaScript实现表格数据的删除和编辑功能。通过事件委托，当用户点击删除或修改按钮时，会触发相应的操作，如弹出确认删除的对话框或显示用于编辑的输入框。用户可以对表格中的姓名和手机号进行修改，点击确认后更新表格内容，点击取消则不保存修改。

摘要由CSDN通过智能技术生成

<!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>

ヾ凉秋

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
js获取table中某一行数据

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; outline: none; } table{ width: 600px;
复制链接

扫一扫