`
jeelee
  • 浏览: 637746 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS添加删除元素

 
阅读更多
<html>
<head>
<title>JS添加删除元素</title>
<script type="text/javascript">
  
    function $(nodeId)
    {
        return document.getElementById(nodeId);
    }
    function $Name(tagName)
    {
        return document.getElementsByTagName(tagName);
    }
  
    function replaceMsg()
    {
        var newNode = document.createElement("P");//创建一个P标签
        newNode.innerHTML = "<font color='red'>替换后的文字</font>";
        var oldNode = $Name("P")[0];//获取body里面第一个p元素
        oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签
    }
  
    function removeMsg()
    {
        var node = $("p2");//p标签
        var nodeBtn = $("remove");//按钮
        //node.parentNode.removeChild(node); //下面效果相同
        document.body.removeChild(node);//在body中删除id为P2的元素
        //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮
        document.body.removeChild(nodeBtn);
        //document.body.removeNode();执行这条语句将清空body里面的任何元素
    }
  
    function addbefore()
    {
        var newNode = document.createElement("p");//创建P标签
        //var newText = document.createTextNode("前面添加的元素");
        //newNode.appendChild(newText);//与下面效果一样
        newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//书写P标签里面的内容
        var oldNode = $("p3");//目标标签
        //document.body.insertBefore(newNode,oldNode);
        oldNode.parentNode.insertBefore(newNode,oldNode);//在目标标签前面添加元素
    }
  
    function addlast()
    {
        var newNode = document.createElement("p");//创建P标签
        //var newText = document.createTextNode("后面添加的元素");
        //newNode.appendChild(newText);//与下面效果一样
        newNode.innerHTML = "<font color='red'>后面添加的元素</font>";
        var oldNode = $("p3");
      
        oldNode.appendChild(newNode);
        //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素
    }
  
    window.onload = function addArrayMsg()
    {
        var arrayMsg = ['one','two','three','four','five'];//创建数组
        var fragment = document.createDocumentFragment();//创建文档片段
        var newNode ;
        for (var i=0 ;i<arrayMsg.length ;i++ )
        {
            newNode = document.createElement("P");//创建P标签
            var nodeText = document.createTextNode(arrayMsg[i]);//创建文本标签,value为数组里面的值
            newNode.appendChild(nodeText);//
            fragment.appendChild(newNode);//把P标签追加到fragment里面
        }
        document.body.appendChild(fragment);//把fragment追加到body里面
    }

  
  
    function addRow()
    {
        var tab = $("myTable");
        //tab.createCaption().innerHTML="<font color='red'>我的表格</font>";
        var oldTr = $("handleTr");
        var newTr = tab.insertRow();//创建一行
        var newTd1 = newTr.insertCell();//创建一个单元格
        var newTd2 = newTr.insertCell();//创建一个单元格
        newTd1.innerHTML = "<input type='checkbox' />";
        newTd2.innerHTML = "<input type='text' />";
      
    }
  
    function removeRow()
    {
        var tab = $("myTable");
//        if(tab.rows.length>0){
//            tab.deleteRow();
//            if(tab.rows.length==1)
//                tab.deleteCaption();
//        }
      
        var cbbox ;
        for(var i=0;i<tab.rows.length;i++){
            cbbox = tab.rows[i].childNodes[0].childNodes[0];//获取input元素
            if(cbbox.checked){
              
                tab.deleteRow(i--);
            }
        }
    }
  
    //全选
    function selAll(value){
        var items = document.all.tags("input");//获取页面上所有的input元素
        for(var i = 0;i<items.length;i++){
            if(items[i].type=="checkbox"){//判断类型是否为checkbox
                items[i].checked = value.checked;
            }
        }
    }
  
    function getInputValue()
    {
        var inputArray = new Array();//创建一个数组
        var tab = $("myTable");
        var tbInput;
        for(var i=0;i<tab.rows.length;i++){
           tbInput = tab.rows[i].childNodes[1].childNodes[0].value;
           if(tbInput!=""&&tbInput!=null)
               inputArray.push(tbInput);
        }
        inputArray = inputArray.join("*^&");//默认以","号连接
        $("showValue").value = inputArray;
    }
    var x ='10+20';
("alert(x);")
</script>
</head>
<body>
<p id="p1">Hello World!</p><input type="button" value="替换内容" onClick="replaceMsg();" />
<p id="p2">我可以被删除!</p><input type="button" id="remove" value="删除它" onClick="removeMsg();" />
<p id="p3">在我上下添加一个元素吧！</p><input type="button" id="addbefore" value="前面添加" onClick="addbefore();" />
<input type="button" id="addlast" value="后面添加" onClick="addlast();" />
<p></p>
<div style="border:1px solid blue;height:300px">
    <table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;">
       
    </table>
    <input type="checkbox" onClick="selAll(this);" />
    <input type="button" value="添加一行" id="addRow" onClick="addRow();" />
    <input type="button" value="删除一行" id="removeRow" onClick="removeRow();" /><br>
    <textarea rows="5" cols="25" id="showValue" /></textarea>
    <input type="button" id="getInputValue" onClick="getInputValue();" value="取值 " />
</div>
</body>
</html>
分享到：
| js实现双击单元格变成文本输入框效果代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...

    动态添加删除表单元素

    总结，动态添加删除表单元素是提升网页交互性的重要手段，通过JavaScript的DOM操作，我们可以灵活地管理页面上的表单元素，实现动态的用户界面。理解并掌握这一技术，对于前端开发者来说，无疑会增强其在实际项目中...

    js 添加删除表格

    以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    JS 添加删除元素的实现代码

    在讨论JavaScript添加和删除元素的实现时，首先需要了解的是，JavaScript是一种运行在浏览器中的脚本语言，它使得网页具有交互性和动态效果。在HTML文档对象模型（DOM）中，可以通过JavaScript轻松地添加、删除或...

    js String 添加与删除一个元素

    总的来说，尽管JavaScript的字符串是不可变的，但我们可以通过各种方式模拟添加和删除元素。理解和熟练运用这些方法对于JavaScript开发者来说至关重要。通过本文介绍的方法，你应该能更好地处理字符串的增删操作了。

    jquery添加和删除元素

    本文将详细讲解如何使用jQuery来添加和删除元素，这在Web开发中是极为常见的需求。 首先，让我们理解jQuery的核心概念。jQuery通过选择器（Selectors）找到页面中的元素，然后对这些元素执行各种操作。比如，我们...

    纯js的树形菜单(添加删除节点)

    总的来说，实现"纯js的树形菜单(添加删除节点)"涉及到JavaScript基础、DOM操作、jQuery库的使用，以及事件处理等多方面技能。通过这样的练习，开发者可以提升对Web前端开发的理解，尤其是动态数据展示和交互设计的...

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...

    JS 添加删除行

    ### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中，经常会遇到需要动态操作表格元素的情况，比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态...

    js以逗号分隔方式添加删除字符串

    而`js`文件可能包含了实现这些功能的完整代码，包括添加和删除分隔符的函数。 通过理解和应用这些基本的JS字符串操作，你可以轻松地处理各种数据格式，特别是在处理用户输入或者从API获取数据时。熟练掌握这些技能...

    js添加删除表单中的行

    使用js添加删除表单中的行,动态的添加,适合各种应用系统的前台页面

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息，我们可以总结出一系列关于使用JavaScript（简称JS）操作HTML中的`&lt;table&gt;`元素，尤其是对表格的行（`&lt;tr&gt;`）和列（`&lt;td&gt;`或`&lt;th&gt;`）进行增删操作的关键知识点。以下是对这些功能的详细解释： #...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释： 1. **动态创建DOM元素**： - 在JavaScript中，我们可以通过`document.createElement()`方法来创建新的HTML元素，如...

    js动态添加删除表格

    在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...

    jQuery CSS3动画创建元素列表项添加删除代码

    &lt;title&gt;jQuery CSS3 动画元素添加删除 ul { list-style-type: none; } li { transition: all 0.5s ease; /* CSS3 过渡效果 */ } &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt; 添加 ...

    javaScript动态添加Li元素的实例

    在处理添加删除按钮时，需要注意事件冒泡的原理，即点击按钮时，该事件不仅在按钮上触发，还会向上传递到父节点，直至文档的根节点。在delBtnData函数中，我们通过obj参数获取当前事件发生的节点，并使用两层...

    详解vue添加删除元素的方法

    vue添加删除元素的方法 Vue.js 是一个流行的前端框架，用于构建用户界面和单页应用程序。在 Vue 中，添加和删除元素是非常常见的操作。下面我们将详细介绍 Vue 中添加和删除元素的方法。 添加元素 在 Vue 中，...

    js动态添加和删除行

    同样，你可以根据需求修改这个示例，比如添加删除行的功能，或者改变单元格的内容和行为。理解这些基本原理后，就能灵活应对各种复杂的交互需求了。在实际项目中，你可能会遇到性能优化、兼容性处理、错误处理等问题...

Magicbox
Global site tag (gtag.js) - Google Analytics