Question

当我的页面加载时，下面的XML数据意味着填充文本框，当用户选择“重绘表格”时，它应该添加一个由正确标准组成的行。此外，如果您想再次复制并粘贴它，那么它应该添加另一行，您可以在其中编辑颜色等内容。

<!DOCTYPE html>
<html>    
    <head>
        <!-- This is a comment tag -->
        <meta charset="UTF-8" />
        <title></title>
        <link rel="stylesheet" href="generic.css" type="text/css" media="screen,projection" />
        <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
        <script type="text/javascript">
            var xmlData = "<stock><product><item>1234</item> <description>First item</description><price>12.50</price> </product><product><item>4321</item><description>Second item</description><price>5.99</price></product></stock>";
            paint_table() {}

            $(document).ready(function() {
                if ($('textarea').val().length == 0) {
                    $('textarea').val(xmlData);
                } else {
                    xmlDoc = $.parseXML(xmlData);
                }

                $xml = $(xmlDoc);
                $("#product_table > tbody").empty();

                $xml.find("product").each(function() {    
                    //Process a 'product'
                    var Col0 = $(this).find('item').text();
                    var Col1 = $(this).find('description').text();
                    var Col2 = $(this).find('price').text();
                    $("product_table > tbody").append("<tr><td>" + Col0 +
                        "</td><td>" + Col1 + "</td><td>&pound;" +
                        Col2 + "</td></tr>");

                    $("#product_table > tbody")
                        .find('tr:odd').css("background-color", "red")
                        .end()
                        .find('tr:even').css("background-color", "blue");
                });
            });    
        </script>
    </head>

    <body>
        <table id="product_table">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <textarea cols="80"></textarea><br />
        <button>Repaint Table</button>
    </body>
</html>

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Verdana, sans-serif;
    font-style: normal;
    font-size: 100%;
}

table {
    margin: 20px;
    width: 400px;
}

thead {
    background-color: darkblue;
    color: white;
}

textarea,
button {
    margin-left: 20px;
}

无法在XML中向表中添加行

0 个答案: