改写XML文档

最新推荐文章于 2024-07-20 18:35:22 发布

x_percode

最新推荐文章于 2024-07-20 18:35:22 发布

阅读量181

点赞数 2

分类专栏： XML实验文章标签： xml

本文链接：https://blog.csdn.net/weixin_68781884/article/details/140447793

版权

XML实验专栏收录该内容

8 篇文章 0 订阅

订阅专栏

要求：

将a.xml文档，改成a.html文档，给上一个表格。
用DOM增加一行内容：姓名：王五，成绩：100

a.xml

<?xml version="1.0" encoding="GB2312"?>
<!-- 指定文档遵循的XML版本以及使用的字符编码（GB2312，一种中文编码标准） -->

<!-- 处理指令，通常用于关联样式表或脚本 -->
<?xml-stylesheet type="text/css"?>
<!-- 这里声明了一个样式表，但没有提供具体位置，通常应包含 'href' 属性来指向CSS文件 -->

<!-- 根元素，定义了HTML命名空间，但实际上并未在文档中使用此命名空间 -->
<persons xmlns:HTML="http://www.w3.org/Profiles/xhtml1-transitional">
    <!-- 定义一个列表，其中包含数学成绩 -->
    <list>
        <!-- 单个数学成绩条目 -->
        <maths>
            <!-- 学生姓名 -->
            <name>张三</name>
            <!-- 学生数学分数 -->
            <score>89</score>
        </maths>
        <!-- 另一个数学成绩条目 -->
        <maths>
            <!-- 学生姓名 -->
            <name>李四</name>
            <!-- 学生数学分数 -->
            <score>66</score>
        </maths>
    </list>
<!-- 结束根元素 -->
</persons>

a.html

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>实验9</title>
	<style type="text/css">
		body {
			font-size: 13px;
			line-height: 25px;
		}

		table {
			border-top: 1px solid #333;
			border-left: 1px solid #333;
			width: 300px;
		}

		td {
			border-right: 1px solid #333;
			border-bottom: 1px solid #333;
		}

		.center {
			text-align: center;
		}

		.title {
			text-align: center;
			font-weight: bold;
			background-color: #cccccc;
		}
	</style>
	<script type="text/javascript">
		function addRow() {
			var lengths = document.getElementById("myTable").rows.length;
			var index;
			if (lengths >= 2) {
				index = 2;
			}
			else {
				index = 1;
			}
			var newRow = document.getElementById("myTable").insertRow(index);
			var col1 = newRow.insertCell(0);
			col1.innerHTML = "王五";
			var col2 = newRow.insertCell(1);
			col2.innerHTML = "100";
			col2.align = "center";
		}

		function updateRow() {
			var uRow = document.getElementById("myTable").rows[0];
			uRow.className = "title";
		}

		function delRow() {
			document.getElementById("myTable").deleteRow(1);
		}
	</script>
</head>

<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">89</td>
		</tr>
		<tr id="row3">
			<td>李四</td>
			<td class="center">66</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()" />
</body>

</html>

运行结果：