在IT开发中，子父窗口之间的通信是一种常见的需求，特别是在构建多窗口或模块化应用时。这个场景下，"子父窗口传值--动态添加行"涉及到的技术点主要是JavaScript中的跨窗口通信以及DOM操作，主要应用于Web应用的交互设计。
让我们了解什么是子父窗口。在浏览器环境中，一个窗口可以打开另一个窗口，被打开的窗口称为子窗口，而打开它的窗口则为父窗口。在JavaScript中，我们可以通过`window.open()`方法创建子窗口，并通过`window.opener`属性访问父窗口。
子父窗口之间的数据传递主要依靠两种方式：
1. **通过URL参数**：子窗口可以通过修改其自身的URL来传递数据给父窗口，父窗口可以通过监听`hashchange`、`popstate`等事件获取这些变化。但这种方式的缺点是数据量有限，且不适用于复杂的数据结构。
2. **使用`window.postMessage` API**：这是HTML5引入的一种安全、高效的方法，允许不同源的页面之间进行异步通信。子窗口向父窗口发送数据时，调用`postMessage(data, targetOrigin)`，其中`data`是传输的数据，`targetOrigin`是接收消息的窗口的源（协议+域名+端口）。父窗口则需通过`window.addEventListener('message', callback)`监听`message`事件来接收数据。
动态添加行通常指的是在表格或其他列表元素中，根据用户操作或接收到的数据动态插入新的行。这涉及到DOM（Document Object Model）的操作，如`createElement`、`appendChild`等。以下是一个简单的例子：
```javascript
// 创建新的行元素
var newRow = document.createElement('tr');
// 创建单元格并设置内容
var newCell = document.createElement('td');
newCell.innerHTML = '新数据';
// 将单元格添加到行中
newRow.appendChild(newCell);
// 将行添加到表格的最后一行
var table = document.getElementById('myTable');
table.tBodies[0].appendChild(newRow);
```
在实际应用中，你可能还需要处理更多细节，例如事件绑定、数据验证、用户交互反馈等。结合子父窗口传值，可能的场景是：用户在子窗口中输入或选择数据，点击提交后，子窗口通过`postMessage`将数据发送给父窗口，父窗口接收到数据后动态添加行到某个表格中显示。
总结来说，"子父窗口传值--动态添加行"这一主题涵盖了JavaScript中的跨窗口通信和动态DOM操作，这些都是前端开发者必备的技能。理解和掌握这些技术可以帮助我们创建更加互动和灵活的Web应用程序。
--动态添加行.zip （3个子文件） 
子父窗口传值--动态添加行 
动态添加行列.htm 4KB
