在网页开发中，JavaScript 是一种常用的客户端脚本语言，用于处理用户交互和动态更新页面内容。在这个例子中，我们将探讨如何使用 JavaScript 手动向 HTML 表格中添加数据。这个例子中，我们有两个表格，一个已有数据，另一个为空，用于接收新添加的数据。
HTML 部分定义了两个表格。第一个表格（id="tables"）包含了预填充的数据，每个单元格包含一个输入框和文字，以及一个“新增”按钮。每个按钮都绑定了一个名为 `butd` 的 JavaScript 函数，当点击按钮时会执行这个函数。
JavaScript 部分的代码如下：
```javascript
<script type="text/javascript">
function butd(rows) {
var rows = rows.parentNode.parentNode.rowIndex; // 找到当前选中的行
var mytable = document.getElementById('tables'); // 找到当前这个 table;
var Romm_price = mytable.rows[rows].cells[1].getElementsByTagName('input')[0].value; // 获取年龄
var Romm_cost = mytable.rows[rows].cells[2].getElementsByTagName('input')[0].value; // 获取金钱
var Name = mytable.rows[rows].cells[3].innerHTML; // 获取名字
var table2 = document.getElementById('table2'); // 获取空的 table;
// 创建新的行
var newRow = table2.insertRow(table2.rows.length);
// 在新行中创建单元格并插入数据
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = rows;
cell2.innerHTML = Romm_price;
cell3.innerHTML = Romm_cost;
cell4.innerHTML = Name;
}
</script>
```
`butd` 函数首先获取触发事件的按钮所在的行索引，然后通过这个索引找到对应的表格行。接着，它从选定行的各个单元格中提取数据，包括年龄、金钱和名字。这些数据分别存储在 `Romm_price`、`Romm_cost` 和 `Name` 变量中。
接下来，函数找到第二个表格（id="table2"），并在此表格的末尾插入新的一行。对于每一列，函数都会创建一个新的单元格，并将之前提取的数据插入到相应的单元格中。这样，当用户点击“新增”按钮时，选定行的数据就会被复制并添加到空的表格中。
这个简单的示例展示了如何利用 JavaScript 实现动态数据操作，这对于构建交互式的网页应用是非常基础且重要的技能。在实际开发中，这种功能可能更复杂，涉及更多的验证、错误处理和用户体验优化。但这个例子提供了一个直观的起点，帮助理解如何用 JavaScript 直接操作 DOM 元素和处理用户事件。
