Question

我想创建一个主细节。所以，我遵循这个教程：

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

我决定重现它，但我的代码中出现了问题（？）。

这是我的代码：

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; 
}

这是应该发生的事情：

enter image description here

这就是发生在我身上的事情：

enter image description here

这行是空的！为什么呢？

Answer 1

$("td:nth-child(1)")

从表中覆盖所有第一批孩子。

您需要指定要替换单元格的行：

$(".saleRow td:nth-child(1)")

Answer 2

您的第一行javascript会替换您桌上所有第一批孩子的内容。

更改：

$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");

with：

$("td:nth-child(1)").css("border","red dashed 2px")

你会明白我的意思。

请在此处查看：http://codepen.io/jeremythille/pen/qELyWX

td:nth-child(1)表示“整个表格的每个<td>中的每一个<tr>”。但是你有嵌套表......

掌握HTML，CSS和jQuery的主要细节

2 个答案: