获取数组中动态添加的行数据可以通过以下步骤实现:
以下是一个示例代码:
// 创建一个空数组,用于存储动态添加的行数据
let rowData = [];
// 监听添加行数据的事件,例如点击按钮
document.getElementById('addRowButton').addEventListener('click', function() {
// 获取用户输入的数据或从其他数据源中获取需要添加的行数据
let name = document.getElementById('nameInput').value;
let age = document.getElementById('ageInput').value;
// 创建一个对象,存储行数据
let row = {
name: name,
age: age
};
// 将行数据添加到数组中
rowData.push(row);
// 清空输入框
document.getElementById('nameInput').value = '';
document.getElementById('ageInput').value = '';
// 更新页面展示的数据
updateTable();
});
// 更新页面展示的数据
function updateTable() {
let tableBody = document.getElementById('tableBody');
tableBody.innerHTML = '';
// 遍历数组中的数据,动态创建表格行并添加到页面中
rowData.forEach(function(row) {
let tr = document.createElement('tr');
let tdName = document.createElement('td');
let tdAge = document.createElement('td');
tdName.textContent = row.name;
tdAge.textContent = row.age;
tr.appendChild(tdName);
tr.appendChild(tdAge);
tableBody.appendChild(tr);
});
}
在上述示例代码中,我们通过监听按钮的点击事件来添加行数据。用户在输入框中输入姓名和年龄后,点击按钮,会将输入的数据添加到数组中,并通过updateTable
函数更新页面上的表格展示。你可以根据实际需求进行修改和扩展。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云