Fatal编程技术网

Javascript 将一行展开为多行

javascript jquery html css

Javascript 将一行展开为多行,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个有两行的表，当我单击一行中的图标时，该行需要展开成多行，然后折叠，如果单击一行中的箭头按钮，则需要显示多行而不显示箭头按钮，如果再次单击，则需要向上移动 <!DOCTYPE html> <html lang="en"> <head> <title>Simple Table</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/

我有一个有两行的表，当我单击一行中的图标时，该行需要展开成多行，然后折叠，如果单击一行中的箭头按钮，则需要显示多行而不显示箭头按钮，如果再次单击，则需要向上移动

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Table</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"     type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("tr.oda").hide();
            $("tr.oda1").show();
            /* now if click any one of the image button it expands all the values*/

            $("tr.oda1").click(function(){
                $(this).siblings(".oda").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
        });
    </script> 

<style type="text/css">
// here you can add any image you want and just check 
     div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px;      height:16px; display:block;}
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }

    body {
        margin:0;
        padding:0;
        font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
        color: #555;
        background:#f5f5f5 url(bg.jpg);
    }

    a {color:#666;}

    #content {width:65%; max-width:690px; margin:6% auto 0;}

    /*
    Pretty Table Styling
    CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/
    */

    table {
        overflow:hidden;
        border:1px solid #d3d3d3;
        background:#fefefe;
        width:70%;
        margin:5% auto 0;
        -moz-border-radius:5px; /* FF1+ */
        -webkit-border-radius:5px; /* Saf3-4 */
        border-radius:5px;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

    th, td {padding:18px 28px 18px; text-align:center; }

    th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}

    .directory { background:#c0c0c0; }

    .subdirectory { background:lightgrey; } 

    .subfiles { background:lightblue; }

    td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}


    td.first, th.first {text-align:left}

    td.last {border-right:none;}

    .empty {border: 10px solid transparent}
    /*
    Background gradients are completely unnecessary but a neat effect.
    */

    td {
        background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
        background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
    }



    th {
        background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
        background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
    }

    /*
    I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements.
    Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius

    And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
    */

    tr:first-child th.first {
        -moz-border-radius-topleft:5px;
        -webkit-border-top-left-radius:5px; /* Saf3-4 */
    }

    tr:first-child th.last {
        -moz-border-radius-topright:5px;
        -webkit-border-top-right-radius:5px; /* Saf3-4 */
    }

    tr:last-child td.first {
        -moz-border-radius-bottomleft:5px;
        -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
    }

    tr:last-child td.last {
        -moz-border-radius-bottomright:5px;
        -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
    }

</style>

</head>
<body>
 <pre cellspacing="0">
    <tr><th class="directory">Directory Name</th><th id="occurances">No of occurances </th></tr>

    <tr class ="oda1"><td class ="subdirectory">Look at Orman's </a></td><td>100%</td> <td class ="empty"><div class="arrow"></div></td>
        </tr>

    <tr  class = "oda"><td class="subfiles"> design into a web project</td><td>100%</td> 
        </tr>
   <tr class = "oda"><td class="subfiles"> design into a web project</td><td>100%</td> 
        </tr>

    <tr class = "oda1"><td class ="subdirectory">Drink another cup of coffee</td><td>50%</td>    <td><div class="arrow"></div></td>
        </tr>
    <tr class = "oda"><td >Take a stretch break</td><td>0%</td>    
        </tr>
    <tr class = "oda"><td >Post this stuff on the interweb</td><td>100%</td>    <td><div class="arrow"></div></td>
        </tr>
    </pre>/* this is used instead of table tag*/
</div>
</body>
</html>


简表
$（文档）.ready（函数（）{
$（“tr.oda”）.hide（）；
$（“tr.oda1”）.show（）；
/*现在，如果单击任何一个图像按钮，它将展开所有值*/
$（“tr.oda1”）。单击（函数（）{
$（this.sides（“.oda”）.toggle（）；
$（this.find（“.arrow”）.toggleClass（“向上”）；
});
});
//在这里，你可以添加任何你想要的图像，只需检查
div.arrow{背景：透明url（arrows.png）无重复滚动0px-16px；宽度：16px；高度：16px；显示：block；}
html、正文、div、span、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
缩写、地址、引用、代码，
del、dfn、em、img、ins、kbd、q、samp、，
小、强、次、辅助、变量，
b、 我,，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
垂直对齐：基线；
背景：透明；
}
身体{
保证金：0；
填充：0；
字体：12px/15px“Helvetica Neue”，Arial，Helvetica，无衬线；
颜色：#555；
背景：#f5url（bg.jpg）；
}
a{color:#666；}
#内容{宽度：65%；最大宽度：690px；边距：6%自动0；}
/*
漂亮的桌子造型
CSS技巧还有一个很好的编写方法：http://css-tricks.com/feature-table-design/
*/
桌子{
溢出：隐藏；
边框：1px实心#D3；
背景：#fefefe；
宽度：70%；
利润率：5%自动0；
-moz边界半径：5px；/*FF1+*/
-webkit边界半径：5px；/*Saf3-4*/
边界半径：5px；
-moz盒阴影：0.4pxrgba（0,0,0,0.2）；
-webkit盒阴影：0.4×rgba（0,0,0,0.2）；
}
th，td{填充：18px 28px 18px；文本对齐：居中；}
th{填充顶部：22px；文本阴影：1px 1px 1px#fff；背景：#e8eaeb；}
.目录{背景：#C0C0；}
.子目录{背景：浅灰色；}
.子文件{背景：浅蓝色；}
td{边框顶部：1px实心#e0e0；边框右侧：1px实心#e0e0；}
td.first，th.first{text align:left}
td.last{右边界：无；}
.empty{边框：10px实心透明}
/*
背景渐变是完全不必要的，但一个整洁的效果。
*/
运输署{
背景：-moz线性梯度（100%25%90度，#fefefe，#F9F9）；
背景：-webkit梯度（线性，0%0%，0%25%，从（#f9f9f9）到（#fefe））；
}
th{
背景：-莫兹线性梯度（100%20%90度，#e8eaeb，#EDED）；
背景：-webkit梯度（线性，0%0%，0%20%，从（#eded）到（#e8eaeb））；
}
/*
我知道这很烦人，但我们需要额外的样式，以便webkit能够识别背景元素上的圆角。
这篇文章写得很好：http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius
而且，由于IE的缘故，我们已经将背景色应用于td/th元素，Gecko浏览器也需要它。
*/
tr：第一个孩子{
-左上角moz边界半径：5px；
-webkit边框左上半径：5px；/*Saf3-4*/
}
tr：第一个孩子是最后一个{
-moz边框半径右上角：5px；
-webkit边框右上半径：5px；/*Saf3-4*/
}
tr：最后一个孩子td.first{
-moz边框半径左下角：5px；
-webkit边框左下半径：5px；/*Saf3-4*/
}
tr：最后一个孩子td{
-moz边框半径右下角：5px；
-webkit边框右下半径：5px；/*Saf3-4*/
}
目录名发生次数
看看奥曼的100%
设计成网络项目100%
设计成网络项目100%
再喝一杯咖啡50%
进行拉伸休息0%
在interweb100%上发布这些内容
/*这是用来代替表标记的*/
表行必须始终是表的一部分，如果希望这些行是某个父行的子行，则它们必须属于自己的表。考虑以下设置：

HTML

<table>
    <tr>
        <td class="expand">[+]</td>
        <td>This is parent
            <table class = "child">
                <tr><td>This is child</td></tr>
                <tr><td>This is child</td></tr>
                <tr><td>This is child</td></tr>
            </table>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>This is parent
        </td>
    </tr>
</table>
我们现在只需要一些JavaScript将其粘合在一起（您的标记提到jQuery，所以我正在使用它）：

JavaScript:

$('.expand').click(function() {
    var $td = $(this);

    if ($td.text() == '[+]') {
        $td.text('[-]');
        $td.next().children('table').show()
    } else {
        $td.text('[+]');
        $td.next().children('table').hide()
    }  
})
此代码处理单击“展开”图标并相应地隐藏或显示子行

演示：

您能提供一个提琴吗？请看，呈现的HTML中没有tr 
$('.expand').click(function() {
    var $td = $(this);

    if ($td.text() == '[+]') {
        $td.text('[-]');
        $td.next().children('table').show()
    } else {
        $td.text('[+]');
        $td.next().children('table').hide()
    }  
})