js的删除节点和添加节点

最新推荐文章于 2024-05-11 11:23:35 发布
最新推荐文章于 2024-05-11 11:23:35 发布
阅读量634 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41899840/article/details/80113355
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function checkbox(chk){
var ischeck=chk.checked;
var list=document.getElementsByName('chkstu');
for(var i=0;i<list.length;i++){
var mychk=list[i];
mychk.checked=ischeck;
}
}
window.οnlοad=function(){
var trlist=document.getElementsByTagName('tr');
for(var i=1;i<trlist.length;i++){
var mytr=trlist[i];
var oldbgcolor='';
mytr.οnmοuseοver=function(){
oldbgcolor=this.style.background;
this.style.background='#f1f1f1';
}
mytr.οnmοuseοut=function(){
this.style.background=oldbgcolor;
}
}
var linklist=document.getElementsByTagName('a');
for(var i=0;i<linklist.length;i++){
var mylink=linklist[i];
mylink.οnclick=function(){
var delnode=this.parentNode.parentNode;
var pnode=delnode.parentNode;
pnode.removeChild(delnode);
}
}
}
    function delsel(){
    var chklist=document.getElementsByName('chkstu');
    for(var i=chklist.length-1;i>=0;i--){
    if(chklist[i].checked==true){
    tr=chklist[i].parentNode.parentNode;
    pnode=tr.parentNode;
    pnode.removeChild(tr);
    }
    }
    }
     function add(){
        var name=document.getElementById('stuname').value;
        var age=document.getElementById('age').value;
        var sex='';
        var rlist=document.getElementsByName('sex');


        
        for(var i=0 ; i < rlist.length ; i++){
            if(rlist[i].checked==true){
                sex=rlist[i].value;
                break;
            }
        }
        var mytr=document.createElement('tr');


        var mytd1=document.createElement('td');
        mytd1.innerHTML = '<input type="checkbox" name="chkstu">';
        mytr.appendChild(mytd1);


        var mytd2=document.createElement('td');
        mytd2.innerHTML = name;
        mytr.appendChild(mytd2);


        var mytd3=document.createElement('td');
        mytd3.innerHTML = sex;
        mytr.appendChild(mytd3);


        var mytd4=document.createElement('td');
        mytd4.innerHTML = age;
        mytr.appendChild(mytd4);


        var mytd5=document.createElement('td');
        mytd5.innerHTML = '<a href="#">del</a>' ;
        mytr.appendChild(mytd5);


        var mytable=document.getElementsByTagName('table')[0];
        mytable.appendChild(mytr);


     } 
</script>
<style type="text/css">
table{
width: 800px;
height: 400px;
margin: 0 auto;
border-collapse: collapse;
}
.color{
background-color: #ffb6c1;
}
.shanchu{
width: 100px;
height: 30px;
background-color:#ffb6c1; 
margin-left: 650px;
margin-top: 30px;
border: 0px;
}
fieldset{
width: 400px;
margin: 0 auto;
padding-left: 40px;
border: 2px solid #ffb6c1;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" οnclick="checkbox(this)">全选</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr class="color">
<td><input type='checkbox' name="chkstu"></td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type='checkbox' name="chkstu"></td>
<td>李四</td>
<td>20</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr class="color">
<td><input type='checkbox' name="chkstu"></td>
<td>王五</td>
<td>20</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type='checkbox' name="chkstu"></td>
<td>赵六</td>
<td>20</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr class="color">
<td><input type='checkbox' name="chkstu"></td>
<td>小新</td>
<td>18</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
</table>
<input type="button" value="删除所有" οnclick="delsel()" class="shanchu">
<fieldset>
    <legend>添加信息</legend>
        
        <div class="luru">
            <label for="">姓名</label>
            <input type="text" id="stuname">
        </div>
        <div class="luru">
            <label for="">性别</label>
            <input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女
        </div>
        <div class="luru">
            <label for="">年龄</label>
            <input type="text" id="age">
        </div>
        <div class="luru">
            <input type="button" class="btn" value="添加" οnclick="add()" >
            <input type="reset" class="btn" value="重置">
        </div>
        
    </fieldset>
</body>
</html>
Chrome111
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js操作节点（添加、删除、更改属性）(转)
weixin_30363817的博客
11-18 151
1.创建节点并添加内容:使用的方法:createElement和createTextNode <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title&...
js增加删除节点
杨明的博客
10-26 1027
每点击一次更多联系人，增加一组联系人信息。点击后面的减号，则删除一组联系人信息。代码如下所示：
JS删除树型结构中的某些满足条件的节点
最新发布
看陌生的风景的博客
05-11 210
【代码】JS删除树型结构中的某些满足条件的节点。
js----增加删除节点
sujingnuli1的博客
12-15 276
function add(){ var trNode=document.createElement("tr"); var td1Node=document.createElement("td"); var td2Node=document.createElement("td"); td1Node.innerHTML=""; td2Node.innerHTML="删除附件"; trN
JS对DOM节点的操作--增加节点，删除节点
无冕之王
08-13 1万+
（1）：DOM ：DOM文档树的全称是document object model ,也就是文档对象模型，在js中，把整页面当成一个dom树，而我们可以对每一个节点都可以进行相应的操作，比如创建一个节点，删除一个节点等等。 对于操作的方法；这里我将展示一个小的demo. 先看下效果图：当点击添加的时候，在父div里创建新的div节点，并且生成随机颜色，当点击删除的时候，删除当前的div节点，也就
js清空子节点
weixin_30736301的博客
09-18 1130
删除全部子节点 function removeAllChild(){ 　　var div = document.getElementById("div1"); 　　while(div.hasChildNodes()) //当div下还存在子节点时 循环继续 　　{ 　　　　div.removeChild(div.firstChild); 　　}} 转载于:h...
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
10-17
本文将深入探讨如何在JavaScript中创建、添加和删除二叉树节点，以及如何进行遍历。 首先，我们定义一个`Node`构造函数来创建节点，它包含`data`（存储数据）、`left`（指向左子节点的引用）和`right`（指向右子...
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
添加和删除HTML节点的简单示例
09-28
本文将深入探讨如何通过JavaScript进行HTML节点的添加与删除，以实现“添加节点”和“删除节点”的功能。 首先，我们来理解HTML节点的基本概念。HTML文档由一系列节点构成，包括元素节点（如`<div>`、`<input>`等）...
js实现上传文件添加和删除文件选择框
10-21
在JavaScript中实现文件上传功能时，通常会遇到浏览器兼容性问题，特别是涉及到文件选择框的动态添加和删除。本文将详细介绍如何使用JavaScript实现这一功能，并解决在Firefox等浏览器中的兼容性问题。 首先，我们...
JavaScript实现在树形菜单中添加、删除节点实例
05-16
内容索引:脚本资源,Ajax/JavaScript,树形菜单　JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。测试中发现代码似乎...
创建、插入、删除、查询、替换dom节点的方法（JS实现）
weixin_34293141的博客
09-08 167
1、创建元素节点：createElement 用法：document.createElement("p");//创建p标签； 创建文本节点：createTextNode; 用法：document.createTextNode("txt");//创建文本标签； 2、插入节点：appendchild:在要插入的元素节点上调用，他插入指定的节点使其成为那个节点的最后一个子节点。 ...
JS添加和删除节点
03-26 172
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <div id="div1"> 7 <p id="p1">这是一个段落</p> ...
JavaScript增加节点和删除DOM节点
qq_24917475的博客
10-21 163
效果图（点新增，input框增加）： html代码： <div class="content" id="factoryName" style="width:35%"> <div style="width:100%;display: inline-block; margin-right: 30px;"> <input style="width: 80%;margin-bottom: 10px;margin-right: 10px;" class="num_test r
js和jq动态添加、删除节点的方法汇总
youyouyouyou44的博客
09-29 1179
使用的时候总是容易查一下、试一下，今天想要自己总结一下，要是不确定直接来看看。 刚说完要自己写，结果就看到了更好的总结，所以我就加上自己的理解做了部分修改，不要嫌弃我呀~ 一：原生js操作节点 1、appendChild();添加 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加 使用方式：父级节点.appendChild( 要添加的节点 ) ...
JavaScript中如何删除节点？
热门推荐
firstcode666的博客
10-31 1万+
2019-08-17阅读(7360) 在JavaScript中可以使用removeChild()或remove()方法来删除节点。下面本篇文章就来给大家具体介绍一下，希望对大家有所帮助。 方法1：使用remove()删除节点 remove()方法可用于删除父节点上的所有元素，包括所有文本和子节点。 示例：删除ul节点 上的所有子节点li <!DOCTYPE html> <html> <head> <meta charset="utf-8"&..
js添加删除class
weixin_42645716的博客
02-27 315
&lt;div class="someClassName" id="id"&gt;测试元素&lt;/div&gt; &lt;script&gt; var classVal = document.getElementById("id").getAttribute("class"); //删除 classVal = classVal.replace("
一个JTree节点添加、删除和修改的例子
lihailinlihailin的专栏
04-29 3097
import java.awt.BorderLayout; import java.awt.Color; import java.awt.Component; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java
jstree 创建删除节点，获取选择的节点数据
殷长庆的博客
10-09 631
首先从官网下载jstreehttps://github.com/vakata/jstree/zipball/3.3.4下载完解压后使用dist文件夹下的文件引用css文件<link rel="stylesheet" href="/jstree/themes/default/style.min.css" />引用js文件 <script src="/jquery/jquery.min.js"></sc
echarts添加节点和删除节点
07-27
对于 echarts，要添加节点和删除节点，你需要使用 echarts 的 API 来操作图表。 添加节点： 要添加节点，你需要使用 `addData` 方法。首先，获取到你想要添加节点的系列（series），然后调用 `addData` 方法来添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值