jquery !救急啊！！！！

qq_38214203 2017-04-28 04:12:16 


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <title>5666</title>

    <script type="text/javascript">

        window.onload = function() {

            var tree = document.getElementById("ul2");

            var lis = tree.getElementsByTagName("li");

            for(var i = 0; i < lis.length; i++) {

                (function(a) {

                    lis[a].onclick = function() {

                        if(typeof this.getElementsByTagName("ul") !== null) {

                            var ul_first = this.getElementsByTagName("ul")[0];

                            if(ul_first.style.display == "block")

                                ul_first.style.display = "none";

                            else

                                ul_first.style.display = "block";

                        }

                    };

                })(i);

            }

        };

    </script>

    <style type="text/css">

        #ul1 {

            width: 150px;

        }

        #ul1, #tree ul {

            list-style: none; margin: 0; padding: 0; padding: 10px;

        }

        #tree ul {

            display: none;

        }



    </style>

</head>



<body>

<table width="355" height="192" border="1">

    <tr>

        <td colspan="3">

            <span style="margin-left: 40px">

            机构:<input id="key-word" style="width: 50px;" type="text" value=""/>

            代理人:<input style="width: 50px" type="text" value=""/>

            <button onclick="search()">查询</button></span>

        </td>

    </tr>

    <tr>

        <td  width="128" align="center" valign="middle">

            <ul style="list-style-type:none;"  id="ul1">

                <li>机构00

                    <ul style="list-style-type:none;" style="display: none">

                       <li><input type="checkbox"/>代理人1-1</li>

                        <li><input type="checkbox"/>代理人1-2</li>

                        <li><input type="checkbox"/>代理人1-3</li>

                        <li><input type="checkbox"/>代理人1-4</li>

                    </ul>

                </li>

            </ul>

            <ul style="list-style-type:none;" id="ul2">

                <li><span style="background-size: 1px">机构22</span>

                    <ul  style="list-style-type:none;" style="display: none">

                        <li><input type="checkbox"/>代理人2-1</li>

                        <li><input type="checkbox"/>代理人2-2</li>

                        <li><input type="checkbox"/>代理人2-3</li>

                        <li><input type="checkbox"/>代理人2-4</li>

                    </ul>

                </li>

            </ul>

        </td>

        <td width="101" align="center" valign="middle">

            <input type="button" name="Submit" value=" 右移>> " onclick="right_move()"/>

            <br/>

            <br/>

            <input type="button" name="Submit2" value=" 删  除 " onclick="del_right();"/>

        </td>

        <td width="128" align="center" valign="middle">

            <select name="right_" size="7" multiple="multiple" id="right_" style="width:100px;">

            </select>

        </td>

    </tr>

    <tr>

        <td colspan="3">

            <button style="margin-left: 114px">确认</button>

               

            <button>返回</button>

        </td>

    </tr>



</table>

</body>

</html>


我的代码上有复选框，查询的时候是可以模糊查询的。谢谢各位大哥了。 机构只能输入数字！(最好使用jquery)！！！
...全文
203 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
puydxp 2017-04-30
  • 打赏
  • 举报
 回复 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="/lib/jquery.min.js"></script>
    <title>5666</title>
    <script type="text/javascript">
        window.onload = function() {
            var tree = document.getElementById("ul2");
            var lis = tree.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                (function(a) {
                    lis[a].onclick = function() {
                        if (typeof this.getElementsByTagName("ul") !== null) {
                            var ul_first = this.getElementsByTagName("ul")[0];
                            if (ul_first.style.display == "block")
                                ul_first.style.display = "none";
                            else
                                ul_first.style.display = "block";
                        }
                    };
                })(i);
            }
        };

        function search() {
            var k = $("#key-word").val();
            var g = $("#agent").val();

            $("td>ul>li>ul>li>input:checked").prop("checked", false);

            $("td>ul>li>span").each(function() {
                var fk = $(this).text().indexOf(k) >= 0;

                $(this).parent().find("ul>li").each(function() {
                    var fg = $(this).text().indexOf(g) >= 0;

                    if (fk && fg) $(this).find("input:checkbox").prop("checked", true);
                })
            })

        }

        function right_move() {
            $("td>ul>li>ul>li:has(input:checked)").each(function() {
                var t = $(this).text().trim();
                var s = $("#right_>option[value='" + t + "']");
                if (s.length == 0) {
                    $("#right_").append($("<option/>").val(t).text(t).prop("selected", true));
                }
            })
        }

        function del_right() {
            $("#right_>option:selected").remove();
        }
    </script>
    <style type="text/css">
        #ul1 {
            width: 150px;
        }
        
        #ul1,
        #tree ul {
            list-style: none;
            margin: 0;
            padding: 0;
            padding: 10px;
        }
        
        #tree ul {
            display: none;
        }
    </style>
</head>

<body>
    <table width="355" height="192" border="1">
        <tr>
            <td colspan="3">
                <span style="margin-left: 40px">
            机构:<input id="key-word" style="width: 50px;" type="text" value=""/>
            代理人:<input id="agent" style="width: 50px" type="text" value=""/>
            <button onclick="search()">查询</button></span>
            </td>
        </tr>
        <tr>
            <td width="128" align="center" valign="middle">
                <ul style="list-style-type:none;" id="ul1">
                    <li><span>机构00</span>
                        <ul style="list-style-type:none;" style="display: none">
                            <li><input type="checkbox" />代理人1-1</li>
                            <li><input type="checkbox" />代理人1-2</li>
                            <li><input type="checkbox" />代理人1-3</li>
                            <li><input type="checkbox" />代理人1-4</li>
                        </ul>
                    </li>
                </ul>
                <ul style="list-style-type:none;" id="ul2">
                    <li><span style="background-size: 1px">机构22</span>
                        <ul style="list-style-type:none;" style="display: none">
                            <li><input type="checkbox" />代理人2-1</li>
                            <li><input type="checkbox" />代理人2-2</li>
                            <li><input type="checkbox" />代理人2-3</li>
                            <li><input type="checkbox" />代理人2-4</li>
                        </ul>
                    </li>
                </ul>

            </td>
            <td width="101" align="center" valign="middle">
                <input type="button" name="Submit" value=" 右移>> " onclick="right_move()" />
                <br/>
                <br/>
                <input type="button" name="Submit2" value=" 删  除 " onclick="del_right();" />
            </td>
            <td width="128" align="center" valign="middle">
                <select name="right_" size="7" multiple="multiple" id="right_" style="width:100px;">
            </select>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <button style="margin-left: 114px">确认</button>    
                <button>返回</button>
            </td>
        </tr>

    </table>
</body>

</html>
qq_38214203 2017-04-28
  • 打赏
  • 举报
 回复
没人看吗 大哥们大神们 都来看看啊 江湖救急啊！ 指教指教啊
JQuery生成word
江湖救急： 进入jquery.wordexport.js ，看到以下内容： top行最后原本是： <!DOCTYPE html>\n<html>\n_html_</html> 修改为 <!DOCTYPE ...
jquery 新建的元素事件绑定问题
demo:http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html<br />我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是 在页面加载完成后给元素绑定了事件，但又新增加的元素...
jquery 新建元素的事件绑定
上面几种方案可以说即便你没有用到jQuery库，你也能相对比较容易的实现。但这种方案相对依赖jQuery的程度更高。而且必须要求jQuery 1.2版以上。低版本jQuery需要插件。 上面两个方案都是对删除函数动了很多脑筋...
解决chrome阻止跨域方式，jquery-3.1.1.min.js:4 Cross-Origin Read Blocking (CORB) blocked cross-origin response
《解决浏览器请求成功数据被拦截，获取不到数据问题》 ——————————————...但是今天要解决的是开发者自己要在公司外调试代码的情况，临时救急快速进入可开发状态，上面的方法可以帮助前端开发人员通过
基于jQuery的黑色简洁风翻页时钟实现代码项目
利用JavaScript的Date对象获取实时时间，配合jQuery简化DOM操作与事件控制，并通过CSS定义深色主题样式与翻页动画，实现每秒自动更新的流畅翻页效果。本项目适合前端初学者学习jQuery在动态交互与动画处理中的实际...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章