javaseday37补充(list展开闭合 节点单独操作 注意获取节点时的s 增删行)

最新推荐文章于 2022-12-01 14:13:03 发布
转载 最新推荐文章于 2022-12-01 14:13:03 发布 · 389 阅读 · 0
本文介绍了一种通过JavaScript实现网页元素动态操作的方法，包括列表的展开与收起、表格的创建与修改等实用技巧，有助于提升网站交互体验。 
<style type="text/css">
dl dd{
    margin:0px;
}
dl{
    height:16px;
    overflow:hidden;
}
/*预定义一些样式 类选择器 便于给标签进行样式的动态加载*/
.open{
    overflow:visible;
    height:auto;
}
.close{
    overflow:hidden;
}
dl dt{
    color:#06F;
}
</style>
<script type="application/javascript">
</script>
</head>

<body>
<!--
1、标签封装数据 html
2、定义样式 css
3、明确事件源和事件 以及要处理的节点 dom
4、明确具体操作方式 其实就是事件的处理内容 js
 -->
<script type="application/javascript">
    //列表展开闭合效果
    var flag= true;
    function list1()
    {
        /*
            1、无非就是将dl属性的overflow的值改成visible即可
            2、要先获取dl节点
            3、改变该节点的style.overflow属性
        */
        //1、获取dl节点
        var oDlNode = document.getElementsByTagName("dl")[0];
        //oDlNode.style.overflow="visible";
        if(flag)
        {
            oDlNode.style.overflow="visible";   
            flag= false;
        }
        else{
            oDlNode.style.overflow="hidden";    
            flag= true; 
        }
    }
    //重新定义list 降低js和css的耦合性
    function list2(node)
    {
        //1、获取div节点
        //var oDlNode = document.getElementsByTagName("dl")[node];
        //2、设置dl的className属性值
        //oDlNode.className="open";
        var oDlNode = node.parentNode;
        if(oDlNode.className=="close")
        {
            oDlNode.className="open";   
        }
        else 
        {
            oDlNode.className="close";
        }
    }
    /*
        在多个列表下 一次只需要展开一个列表 其他列表都关闭
        怎么保证开一个 而关其他
        1、获取所有的dl节点
        2、遍历这些节点 只对当前的dl进行展开 或者闭合操作 其他节点都进行闭合操作
    */
    function list(node)
    {
        //获取当前的dl节点
        var oDlNode = node.parentNode;
        //获取所有的dl节点
        var oDlNodes =  document.getElementsByTagName("dl");
        //遍历所有dl
        for (var x= 0;x<oDlNodes.length;x++)
        {
            if(oDlNodes[x]==oDlNode)
            {
                if(oDlNode.className=="close")
                {
                    oDlNode.className="open";   
                }
                else 
                {
                    oDlNode.className="close";
                }
            }
            else
            {
                oDlNodes[x].className="close";  
            }   
        }

    }
</script>

<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目二</dt>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
</dl>

<dl class="close">
<dt onclick="list(this)">显示条目三</dt>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
<dd>展开里面的内容</dd>
</dl>

</body>

增删行

<script type="text/javascript">
    function creTable1()
    {
        /*
            可以通过之前的createElement 创建元素的形式来完成 巨原始 
        */  
        //1、创建表格节点
        var oTabNode = document.createElement("table");

        //2、创建tBody节点
        var oTbdNode = document.createElement("tbody");
        //3、创建行节点tr

        var oTrNode = document.createElement("tr");
        //4、创建单元格节点td
        var oTdNode = document.createElement("td");
        oTdNode.innerHTML="这是个单元格";
        //alert(oTdNode.innerHTML);

        //让这些节点有关系 进行指定层次的节点添加
        oTrNode.appendChild(oTdNode);
        oTbdNode.appendChild(oTrNode);
        oTabNode.appendChild(oTbdNode);
        document.getElementsByTagName("div")[0].appendChild(oTabNode);

    }
    /*
        上面的方法很麻烦 操作什么就在什么找方法
        既然操作的是表格 那最方便的方式就是使用表格节点对象的方法来完成
        表格是由行组成 表格节点对象中 insertRow方法就完成创建行并添加的动作
        行是由单元格组成 通过tr节点对象的insertCell来完成
    */
    function creTable()
    {
        var oTabNode = document.createElement("table"); 
        oTabNode.setAttribute("id","tabid");
        var rowValue = parseInt(document.getElementsByName("rownum")[0].value);
        var colValue = parseInt(document.getElementsByName("colnum")[0].value);
        for(var x= 1;x<=rowValue;x++){
            var oTrNode = oTabNode.insertRow();
            //document.write(oTrNode.nodeName);
            for(var y= 1;y<=colValue;y++)
            {
                var oTdNode = oTrNode.insertCell();
                oTdNode.innerHTML= x+"单元格"+y;
                //document.write(oTdNode.innerHTML);
            }

        }
        //将表格节点添加到div中
        document.getElementsByTagName("div")[0].appendChild(oTabNode);
        document.getElementsByName("crebut")[0].disabled=true;
    }
    //删除行
    function delRow()
    {
        //获取表格对象
        var oTabNode = document.getElementById("tabid");
        if(!oTabNode)
        {
            alert("表格不存在");
            return; 
        }   

        //获取要删除的表格行数
        var rowVal  = document.getElementsByName("delrow")[0].value;
        if(rowVal>=1 && rowVal<=oTabNode.rows.length)//还有一个长度
        {
        oTabNode.deleteRow(rowVal-1);
        }
        else{
            alert("要删除的行不存在");  
        }
    }
    //删除列 其实就是在删除每一行中同一位置的单元格
    function delCol()
    {
        var oTabNode = document.getElementById("tabid");
        if(!oTabNode)
        {
            alert("表格不存在");
            return; 
        }   
        var colVal  = document.getElementsByName("delcol")[0].value;
        if(colVal>=1 && colVal<=oTabNode.rows[0].cells.length)
        {
            for(var x= 0; x<oTabNode.rows.length;x++)
            {
                oTabNode.rows[x].deleteCell(colVal-1);  
            }
        }
        else
        {
            alert("删除的列不存在");
        }
    }
</script>
</head>

<body>
<!--
在页面中创建一个 5行6列的表格
1、事件源 比如按钮
2、必须有一个生成的表格节点存储位置
 -->
 行<input type="text" name="rownum" />
 列<input type="text" name="colnum" />
 <input type="button" value="创建表格" name="crebut" onclick="creTable()" /> 
 <hr />
 <input type="text" name="delrow"  /> <input type="button" value="删除行" onclick="delRow()" />
 <input type="text" name="delcol"  /> <input type="button" value="删除列" onclick="delCol()" />

 <div>
 </div>
</body>
java 列表展开方式_java – 展开集合中的集合以获取单个List <>
weixin_39801356的博客
02-24 1050
我很擅长使用Java,并尝试使用map来集合集合中的集合来尝试获取单个List.但是我似乎无法让这个工作.为了重现这一点,我创造了一个很简单的例子,说明我正在尝试做什么.这是我到目前为止：ClassA的import java.util.List;public class ClassA {private List listOfClassB;public ClassA(List listOfClass...
java实现树状结构全部展开,Java实现列表转树形结构的两种方式list转tree
weixin_31164189的博客
03-09 1390
正常项目开发中很多地方都需要用到树形结构，如分类，用户，权限等。而在数据库中，通常是使用一个parent_id这样一个字段来记录当前数据的父节点id。那么我们直接从数据库中查出来的是个list，就需要使用代码手动将list转成tree的结构了。我这里提供2种方法实现列表到树形结构的转换。举一个用户的例子，用户实体User结构如下：@Data@ToStringpublic class User {/...
Java处理List集合数据进行分页展示
weixin_50185313的博客
12-01 3272
Java处理List集合数据进行分页展示
list多层列表展开方法对比
Jack_kun的博客
10-10 2349
方法一：https://blog.csdn.net/ytfy12/article/details/51162079 def printm(listin): abc = [] for ie in listin: if isinstance(ie,list): printm(ie) else: print(...
Java中实现list显示的三种方法
meteorWJ's Home—Floating clound
10-26 3927
import java.util.List;import java.util.ArrayList;import java.util.Iterator;public class TestList {     private List list = new ArrayList();     private void initializelist() {         for (int i =
Java List集合方法及遍历过程代码解析
08-19
主要介绍了Java List集合方法及遍历过程代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
java list三种遍历方法性能比较
热门推荐
jkh753的专栏
09-13 22万+
从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码如下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
Java集合List基本使用详解
pickLing_的博客
03-22 311
Java集合List基本使用详解 List实现类 ArraryList: 数组结构实现，查询快、增删慢； JDK1.2版本，运行效率块、线程不安全 Vector: 数组结构实现，查询快、增删慢； JDK1.0版本，运行效率慢、线程安全 LinkedList: 链表结构实现，增删快，查询慢 List接口的特点 之前在我的有关于collection文章中有写到关于List和Set的图片，上面简单的列举了其各自的接口的特点（如果没看的同学可以点击这里进行查看） 特点：有序、有下标、元素可重复
java list ArrayList用法详细
ewili的专栏
03-17 1424
List是一个接口，而ListArray是一个类。 ListArray继承并实现了List。 所以List不能被构造，但可以向上面那样为List创建一个引用，而ListArray就可以被构造。 List list;     //正确   list=null; List list=new List();    //   是错误的用法   List list = new Array
java List基本操作
每天一勃
06-03 2万+
Java List中的常用操作： list中添加，获取，删除元素； list中是否包含某个元素； list中根据索引将元素数值改变(替换)； list中查看（判断）元素的索引； 根据元素索引位置进行的判断； 利用list中索引位置重新生成一个新的list（截取集合）； 判断list是否为空； 返回Iterator集合对象； 将集合转换为字符串； 将集合转换为数组； 去重复； ...
fpga设计思想（二）：有限状态机
zsh1422728529的专栏
09-25 3873
今天聊一聊有限状态机的知识，也许你会觉得这个很枯燥，直接拿来用就好了，但是我要说的是：只有有了扎实的理论基础才会有fpga设计思想，想想自己能够编写一个大型的代码吗？如果不能，那就是我们还没有学会fpga真正的设计思想。fpga编程确实很难，只有扎实的基础，再加多的训练才会拥有fpga设计思想这个技能。好了，废话不多说了，现在开始： 1、有限状态机FSM:简单的说，就是通过不同的状态迁移
java中对List集合的常用操作
wang666zoo的博客
04-13 717
list中添加，获取，删除元素；list中是否包含某个元素；list中根据索引将元素数值改变(替换)；list中查看（判断）元素的索引；根据元素索引位置进行的判断；利用list中索引位置重新生成一个新的list（截取集合）；对比两个list中的所有元素；判断list是否为空；返回Iterator集合对象；将集合转换为字符串；将集合转换为数组；集合类型转换；去重复；   备注：内容中代码
Java中List高效去重
皓月如我的专栏
08-25 7929
直接上代码： private static void DuplicateRemoval(List&lt;Integer&gt; ioList) { LinkedHashSet&lt;Integer&gt; tmpSet = new LinkedHashSet&lt;Integer&gt;(ioList.size()); tmpSet.addAll(ioList); i...
java 列表展开方式_Android之可收缩展开列表ExpandableList
weixin_42445142的博客
02-24 264
在Android的app包中，有这么一个类，这个类继承自Activity，它叫ExpandableListActivity。顾名思义，从它的名字可以看出该类是一种可扩展性的列表List，我们这里理解成可伸缩的列表，也就是通过继承ExpandableListActivity 可以实现列表的可展开/收缩的功能。本文我们主要介绍这种列表的显示是如何实现的，在ListActivity的使用中，我们知道一旦...
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例(单片机原理与应用)(金龙国)电子教案
最新发布
06-21
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例《单片机原理与应用》（金龙国）电子教案
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值