master

分支 (1)

管理

管理

master

web
/
jq20230404.html

<html>
<head>
    <title>DOM操作-练习</title>
    <script type="text/javascript" src="jQuery.js" ></script>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>jQuery实现表格操作</title>
            <script  src="jQuery.js" ></script>
            <style>
                #myTable td, th {
                    padding: 5px;
                    border: 1px solid black;
                }
            </style>

        </head>
        <body>
            <table border="0" cellspacing="0" cellpadding="0" id="myTable">
                <thead>
                    <tr id="row1">
                        <th>书名</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="row2">
                        <td>看得见风景的房间</td>
                        <td class="center">&yen;30.00</td>
                    </tr>
                    <tr id="row3">
                        <td>60个瞬间</td>
                        <td class="center">&yen;32.00</td>
                    </tr>
                </tbody>
            </table>
            <input name="b1" type="button" value="增加一行" onclick="addRow()" />
            <input name="b2" type="button" value="删除第2行" onclick="delRow()" />
            <input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
            <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

            <script>
                function addRow() {
                    var newRow = $('<tr><td>三国</td><td>&yen;197.00</td></tr>');
                    $("#myTable tbody").append(newRow);
                }

                function delRow() {
                    $("#row3").remove();
                }

                function updateRow() {
                    $("#row1").css({
                        "background-color": "lightblue",
                        "color": "white"
                    });
                }

                function copyRow() {
                    var lastRow = $("#myTable tbody tr:last");
                    var newRow = lastRow.clone();
                    $("#myTable tbody").append(newRow);
                }
            </script>
        </body>
        </html>

</html>