master

分支 (1)

管理

管理

master

web
/
jq20230321.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<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>
		</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()" />
	</body>

    <script>
        function addRow() {
            var table = document.getElementById("myTable");
            var newRow = table.insertRow(table.rows.length);
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            cell1.innerHTML = "三国";
            cell2.innerHTML = "&yen;197.00";
        }
        function delRow() {
            var table = document.getElementById("myTable");
            table.deleteRow(2);
        }
        function updateRow() {
            var row1 = document.getElementById("row1");
            row1.style.backgroundColor = "lightblue";
            row1.style.color = "white";
        }
        function copyRow() {
            var table = document.getElementById("myTable");
            var lastRow = table.rows[table.rows.length-1];
            var newRow = lastRow.cloneNode(true);
            table.appendChild(newRow);
        }
    </script>

</head>