HTML，CSS和jQuery的主从细节

本文介绍了HTML，CSS和jQuery的主从细节的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个主细节.因此，我遵循本教程:

I want to create a master-detail. So, I follow this tutorial:

http ://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848

我决定重现它，但是我的代码(?)中有问题.

I decided to reproduce it, but there is something wrong in my code(?).

这是我的代码:

HTML/jQuery

<!DOCTYPE html>
<html>
<head>
    <link href="stile.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");

            $(".clk").click(function () {
            var index = $(this).parent().parent().index();
            var detail = $(this).parent().parent().next();
            var status = $(detail).css("display");
            if (status === "none")
                $(detail).css("display", "table-row");
            else
                $(detail).css("display", "none");
            });
        });            
    </script>
</head>
<body>
    <table id="tbSales" rules="rows"> 
        <thead> 
            <tr> 
                <th></th> 
                <th>ID</th> 
                <th>Date</th> 
                <th>Items</th> 
                <th>Total</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr class="saleRow"> 
                <td></td> 
                <td>01</td> 
                <td>01/01/2001</td> 
                <td>2</td> 
                <td>10,00</td> 
            </tr> 
            <tr class="itemsRow"> 
                <td colspan="5"> Itens 
                    <table class="tbItems" rules="rows"> 
                        <thead> 
                            <tr> 
                                <th>ID</th> 
                                <th>Description</th> 
                                <th>Quantity</th> 
                                <th>Unit Price</th> 
                            </tr> 
                        </thead> 
                        <tbody> 
                            <tr> 
                                <td>A1</td>
                                <td>Product A 1</td> 
                                <td>1</td> <td>7,00</td> 
                            </tr> 
                            <tr> 
                                <td>A2</td> 
                                <td>Product A 2</td>
                                <td>1</td> 
                                <td>3,00</td>
                            </tr> 
                        </tbody> 
                    </table> 
                </td> 
            </tr> 
            <tr class="saleRow"> 
                <td></td>
                <td>02</td> 
                <td>02/02/2001</td>
                <td>3</td> 
                <td>20,00</td>
            </tr> 
            <tr class="itemsRow">
                <td colspan="5"> Itens 
                    <table class="tbItems" rules="rows"> 
                        <thead> 
                            <tr> 
                                <th>ID</th> 
                                <th>Description</th> 
                                <th>Quantity</th> 
                                <th>Unit Price</th> 
                            </tr> 
                        </thead> 
                        <tbody> 
                            <tr> 
                                <td>B1</td> 
                                <td>Product B 1</td> 
                                <td>1</td> 
                                <td>10,00</td> 
                            </tr> 
                            <tr> 
                                <td>B2</td> 
                                <td>Product B 2</td> 
                                <td>2</td> 
                                <td>5,00</td> 
                            </tr> 
                        </tbody>
                    </table> 
                </td> 
            </tr> 
        <tbody> 
    </table>
</body>

CSS :

#tbSales, .tbItems{ 
width:100%; 
border:solid 1px; 
}

#tbSales thead th, .tbItems thead th{
text-align:left; 
} 

#tbSales tr td, .tbItems tr td{ 
border:solid 1px; 
} 

#tbSales tr td:nth-child(1){
width:20px; 
}

#tbSales tbody tr{
background:#DCDCDC; 
} 

.tbItems tr{
background:red; 
} 

#tbSales thead{
background:#4682B4; 
}

.itemsRow{ 
display: none; 
} 

.tbItems{ 
font-size:12px; 
}

这应该发生:

这就是我发生的事情:

该行为空！为什么?

to

HTML，CSS和jQuery的主从细节

问题描述

推荐答案