javaScript对html的添加和删除操作

最新推荐文章于 2023-12-21 12:43:31 发布
最新推荐文章于 2023-12-21 12:43:31 发布
阅读量342 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/morning13/article/details/111824275
版权 
<style>
        html{
   
            width: 100%;
            height: 100%;
            position: relative;
        }
        div{
   
            border: 1px solid blue;
        }
        .box{
   
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 600px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
            margin: -300px 0 0 -400px;
        }
        .left{
   
            float: left;
            width: 190px;
            height: 600px;
        }
        .left button{
   
            width: 150px;
            height: 40px;
            margin-top: 10px;
            margin-left: 20px;
            background: #5BD3CE;
            color: white;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
            outline: none;
        }
        .left button:first-child{
   
            margin-top: 100px;
        }
        .reight{
   
            float: left;
            width: 600px;
            height: 600px;
        }
        .top{
   
            width: 600px;
            height: 100px;
        }
        .moddle{
   
            width: 600px;
            height: 500px;
        }
        #b1-1:hover{
   
            background: black;
        }
    </style>
</head>
<body>
    <div class="box">
最低0.47元/天 解锁文章
morning13
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表格增加和删除一行,layui点击按钮给table添加一行和删除一行(批量删除)
weixin_31887307的博客
06-19 1572
1、CSS代码，用于table里的下拉框不被遮挡.layui-table-cell,.layui-table-box ,.layui-table-body{overflow: visible !important;}td .layui-form-select {margin-top: -10px;margin-left: -15px;margin-right: -15px;}2、表格、按钮、下拉菜...
HTML中动态的增加和删除表格中的一行
热门推荐
H-rosy的博客
05-15 1万+
利用HTML，CSS和JavaScript三种技术完成表格页面级的操作，具体内容如下： （1）利用HTML编写网页： “编号”、“姓名”、“性别”三个文本框，“添加”按钮，一个“学生信息表”表格； （2）利用CSS设置表格的样式：实线边框，文本居中； （3）运用JavaScript DOM技术实现表格增加和删除记录。 页面效果如下： 图1 初始界面 图2添加记录 图3删除记录 <!DOCTYPE html> <html l...
原生html 点击按钮删除数据案例
weixin_59616375的博客
09-12 291
以为删除错误是跨域问题
html table可编辑表格数据实现删除
最新发布
xingdiango的博客
12-21 1257
这样，当用户点击某一行的“Delete”按钮时，相应的行将被删除。在实际项目中，可能需要进一步确认用户是否要删除该行，以及处理删除后的数据更新。在上述示例中，每行的最后一列添加了一个按钮，并为按钮绑定了一个 onclick 事件，调用。函数接受按钮作为参数，在函数内部首先获取按钮的父节点，即所在的。这里教大家使用纯html和js脚本结合实现删除表格数据。元素，最后获取行元素的父节点，即所在的表格。方法，将行的索引作为参数，从表格中删除该行。JavaScript 部分的。的父节点，即所在的行。
点击删除按钮删除一行数据html,JS ：点击按钮table增加一行，删除一行
weixin_31281003的博客
06-07 4434
String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>update_data.jsp//给table增加一行function addTableRow() {...
javascript实现表格添加删除等操作
03-26
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...
javascript HTML操作代码
10-30
本文将详细介绍 JavaScript HTML 操作代码，包括 JavaScript 操作 HTML 标签、创建 optgroup 元素、动态添加选项、删除选项等内容。 JavaScript 操作 HTML 标签 在 HTML 中，每个元素都可以通过 JavaScript 进行...
JavaScript动态改变HTML页面元素例如添加或删除
12-04
可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签，然后向该标签中添加相应的内容，然后将创建好的标签添加到相应的位置。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
javascript删除一个html元素节点的方法
10-25
在JavaScript中，删除HTML元素节点是一项常见的操作，特别是在动态构建页面或者进行DOM操作时。本文将详细介绍如何使用原生JavaScript来删除一个特定的HTML元素节点。 首先，我们需要了解DOM（Document Object ...
JavaScript操作HTML元素和样式的方法详解
10-23
主要介绍了JavaScript操作HTML元素和样式的方法,通过HTML DOM来进行相关的元素添加和删除,需要的朋友可以参考下
JavaScript删除一行代码
01-16
JavaScript删除一行代码，删除一行表格
通过点击添加按钮即可自动添加一行点击删除即可自动删除一行
07-17
通过点击添加按按钮即可自动添加一行，通过点击删除按钮即可自动删除一行。这个是一个很好的例子。代码简洁，用javasript实现的。
HTML详解——初识html（二）
qq_46362763的博客
03-13 1635
随着网页开发的不断发展，学习Web前端这门技术也越来越重要，很多人都开启了学习HTML，本文就介绍了HTML的部分基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
weixin_30266829的博客
09-05 566
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootst...
html 按钮删除行,如何使用DOM更改HTML表格第一行中的按钮？ (按DOM添加和删除行)...
weixin_33387339的博客
07-09 229
您可以通过克隆现有行(和现有按钮)来创建新行。如果您希望第一行中按钮的行为与其他行不同，则需要在insRow函数中覆盖该更改的行为(正如您当前对输入ID所做的那样)。尝试将代码更改为：HTML：...1...JS：function deleteRow(evt) {var i = evt.target.parentNode.parentNode.rowIndex;document.getElemen...
html如何删除表单中的行,用jQuery remove()方法删除表格行(table tr)的写法
weixin_39720516的博客
06-21 1721
用jQuery remove()方法删除表格行(table tr)的写法 1 1186郁匆2019/6/12 10:00:06如何用jQuery按钮单击事件，按id或class-name删除表行。 在按钮单击时，我们删除选定的行/ tr可能是其动态添加的表行或已在DOM上使用的。 使用jQuery .on()将能够通过指定其类名或Id来选择动态添加的元素，然后使用.remove()方法删除所选...
html表格删除指定行,html表格动态添加删除行(有后台操作）
weixin_42131705的博客
06-27 1070
Form Object examplefunction delrow1(){var oElement=event.srcElement;while(oElement.tagName!="TR"){oElement=oElement.parentElement;}var oTBody=oElement.parentElement;oTBody.removeChild(oElement)}functi...
html5页面选择按钮,【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选...
weixin_29765215的博客
06-03 957
页面点击按钮添加一行 删除一行 全选 反选 全不选页面效果图如下html页面代码var rows = 1;function addrows() {var trElement = document.createElement("tr");var td1Element = document.createElement("td");var td2Element = document.cr...
在html在百度地图中对留言进行添加删除操作
06-12
以下是在HTML中使用百度地图API对留言进行添加和删除操作的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在百度地图中添加和删除留言</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <style type="text/css"> #map{ width: 100%; height: 500px; } #msg-form{ position: absolute; top: 10px; left: 10px; background-color: #fff; padding: 10px; z-index: 1000; } .msg-item{ margin-bottom: 10px; padding: 10px; background-color: #fff; } .msg-item h4{ margin: 0; } .msg-item p{ margin: 0; } .msg-item button{ background-color: #f00; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } </style> </head> <body> <div id="map"></div> <form id="msg-form"> <h3>添加留言</h3> <p> <label>标题：</label> <input type="text" id="msg-title" required> </p> <p> <label>内容：</label> <textarea id="msg-content" rows="5" required></textarea> </p> <button type="submit">提交</button> </form> <script type="text/javascript"> // 创建地图实例 var map = new BMap.Map("map"); // 创建点坐标 var point = new BMap.Point(116.404, 39.915); // 初始化地图，设置中心点坐标和地图级别 map.centerAndZoom(point, 15); // 添加控件 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); // 创建留言数组 var msgArr = []; // 添加留言 function addMessage(title, content, point){ // 创建气泡 var marker = new BMap.Marker(point); var infoWindow = new BMap.InfoWindow("<div class='msg-item'><h4>"+title+"</h4><p>"+content+"</p><button class='del-btn'>删除</button></div>"); // 绑定点击事件 marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); }); // 添加气泡到地图上 map.addOverlay(marker); // 添加留言到数组中 msgArr.push({title: title, content: content, point: point, marker: marker, infoWindow: infoWindow}); } // 删除留言 function deleteMessage(index){ // 从地图上移除气泡 map.removeOverlay(msgArr[index].marker); // 从数组中移除留言 msgArr.splice(index, 1); } // 绑定表单提交事件 document.getElementById("msg-form").addEventListener("submit", function(event){ event.preventDefault(); var title = document.getElementById("msg-title").value; var content = document.getElementById("msg-content").value; var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat); addMessage(title, content, point); document.getElementById("msg-form").reset(); }); // 绑定删除按钮点击事件 document.getElementById("map").addEventListener("click", function(event){ if(event.target.classList.contains("del-btn")){ var index = Array.prototype.indexOf.call(event.target.parentNode.parentNode.children, event.target.parentNode); deleteMessage(index); } }); </script> </body> </html> ``` 同样地，您需要将代码中的“您的密钥”替换为您在百度地图开放平台申请的密钥。在表单中输入留言的标题和内容后，点击提交按钮即可在地图上添加留言。在留言气泡中的“删除”按钮上点击，即可删除相应的留言。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值