jQuery学习之字符串显示隐藏

来源：互联网发布：奇门兵器知乎编辑：程序博客网时间：2024/06/05 12:07
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>$Title$</title>    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>    <script>        $(document).ready(function () {            initData();        })        function initData() {            $("input[id*=input_]").each(function(){                var id = $(this).attr("id").split("_")[1];                var name = $(this).val();                $("#name_"+id).prepend(name.length>15?name.substring(0,15):name);                if(name.length>15){                    $("#show_"+id).show();                }            })        }        function showName(id) {            var name=$("#input_"+id).val();            $("#name_"+id).html("");            $("#name_"+id).html(name);            $("#show_"+id).hide();            $("#hide_"+id).show();        }        function hideName(id){            var name=$("#input_"+id).val();            $("#name_"+id).html("");            $("#name_"+id).html(name.length>15?name.substring(0,15):name);            $("#show_"+id).show();            $("#hide_"+id).hide();        }    </script></head><body>    <table cellpadding="1" cellspacing="1" border="1" align="center">        <thead>            <th>序号</th>            <th>名称</th>            <th>年龄</th>        </thead>        <tbody>            <tr>                <td>1</td>                <td>                    <input type="hidden" id="input_1" value="我们都是好孩子，最最可爱的孩子，天真无邪一辈子">                    <div id="name_1" style="float:left">                    </div>                    <span style="display: none" id="show_1" onclick="showName(1)">>>></span>                    <span style="display: none" id="hide_1" onclick="hideName(1)"><<<</span>                </td>                <td>10</td>            </tr><tr>                <td>2</td>                <td>                    <input type="hidden" id="input_2" value="最美的是你眼里的我">                    <div id="name_2" style="float: left">                    </div>                    <span style="display: none" id="show_2" onclick="showName(2)">>>></span>                    <span style="display: none" id="hide_2" onclick="hideName(2)"><<<</span>                </td>                <td>20</td>            </tr><tr>                <td>3</td>                <td>                    <input type="hidden" id="input_3" value="我们不一样不一样， 每个人有不同的际遇，我们在这里，在这里等你">                    <div id="name_3" style="float:left">                    </div>                    <span style="display: none" id="show_3" onclick="showName(3)">>>></span>                    <span style="display: none" id="hide_3" onclick="hideName(3)"><<<</span>                </td>                <td>30</td>            </tr>        </tbody>    </table></body></html>
阅读全文
0 0