Javascript 使用HTML、CSS和jQuery掌握详细信息_Javascript_Jquery_Html_Css

Javascript 使用HTML、CSS和jQuery掌握详细信息

javascript jquery html css

Javascript 使用HTML、CSS和jQuery掌握详细信息,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想创建一个主细节。因此，我遵循本教程：我决定复制它，但我的代码中有一些错误（？）这是我的密码： 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/

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

我决定复制它，但我的代码中有一些错误（？）

这是我的密码：

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>

这就是应该发生的事情：

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

这一排是空的！为什么？

您的第一行javascript将替换表中所有第一个子项的内容

更改：

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

你会明白我的意思

请看这里：

td:n子项（1）

表示“整个表的每个

的每个第一个

”。但是您有嵌套的表…

您的第一行javascript将替换表中所有第一个子项的内容

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

更改：

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

你会明白我的意思

请看这里：

td:n子项（1）

表示“整个表的每个

的每个第一个

”。但是您有嵌套的表…

您的第一行javascript将替换表中所有第一个子项的内容

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

更改：

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

你会明白我的意思

请看这里：

td:n子项（1）

表示“整个表的每个

的每个第一个

”。但是您有嵌套的表…

您的第一行javascript将替换表中所有第一个子项的内容

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

更改：

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

你会明白我的意思

请看这里：

td:n子项（1）

表示“整个表的每个

的每个第一个

”。但是您有嵌套的表

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

正在重写表中的所有第一个子项

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

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

正在重写表中的所有第一个子项

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

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

正在重写表中的所有第一个子项

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

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

正在重写表中的所有第一个子项

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

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