Jquery构建不固定字段个数的母子表

Question

jquery
母表与子表字段不固定(个数未知)，以下只实现了子表不固定添加，怎样实现母表不固定添加呢？

var childArray = [
    { "ChildId": 1, "ChildName": "Child 1" },
    { "ChildId": 2, "ChildName": "Child 2" }
];
 
var parentArray = [
    { "ParentId": 1, name:"Country",”不固定1“，"不固定2",”更多“，"Children": childArray }
];
 

var item = {};
var parentArray[]
var childArray = [];
item['ParentId']=1，
item['name']=”Country“，
parentArray.push(item);
 
 item['ChildId']=1，
 item['ChildId']=2，
  childArray.push(item); // 将当前行的数据添加到数组中
  parentArray.push(childArray);
 
 
//以下方式，只有子表的字段是动态方式添加的，母表怎样以无固定方式添加呢？
const parentArr = [];
const childArray = [];
// 定义添加子数组元素的方法
function addChildItem (cId, cName) {
  childArray.push({
    ChildId: cId,
    ChildName: cName,
  })
}

//  parentArr个数不确定,不止parentId, name这两个，是动态的
function addParentItem (parentId, name, childArr) {
  parentArr.push({
    ParentId: parentId,
    name：name,
    childArray: childArr,
  })
}
addChildItem(1, 'Child 1');
addChildItem(2, 'Child 2');
addParentItem(1, 'Country', childArray);//该方式只能在母表添加固定的字段
console.log(parentArr);

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要构建一个不固定字段个数的母子表，我们需要考虑使用动态的方式来处理字段的添加。这里的关键是构建一个灵活的对象结构，允许动态添加属性。我们可以使用jQuery来简化DOM操作，但主要的逻辑处理仍然基于JavaScript对象。以下是实现动态添加母表和子表的步骤：

1. 创建基本的母表和子表结构。
2. 使用JavaScript对象来存储数据，并允许动态添加属性。
3. 使用jQuery来操作DOM，将数据存储到表格中。

下面是一个简化的例子，展示了如何实现动态添加母表和子表：

// 模拟数据（可以根据需要动态生成或获取）
var parentArray = []; // 母表数组
var currentParent = {}; // 当前处理的母表对象
var childArray = []; // 子表数组，用于临时存储子表数据

// 动态添加母表项的函数
function addParentItem(parentId, parentName) {
  // 创建新的母表对象并设置基本属性
  currentParent = {
    ParentId: parentId,
    name: parentName, // 这里假设name是动态添加的字段之一
    // 其他可能的动态字段...（可根据实际情况动态添加）
    Children: childArray // 存储关联的子表数据
  };
  
  // 将新的母表对象添加到数组中
  parentArray.push(currentParent);
  
  // 清空临时子表数组以备下一次添加子项（如果需要）
  childArray = [];
}

// 动态添加子表项的函数（与母表项关联）
function addChildItem(childId, childName) {
  childArray.push({ ChildId: childId, ChildName: childName }); // 添加到临时子表数组
}

// 添加示例数据（模拟操作）
addParentItem(1, 'Country A'); // 添加一个新的母表项
addChildItem(1, 'Child A-1'); // 为当前母表项添加子项（关联到之前的母表项）
addChildItem(1, 'Child A-2'); // 继续添加子项到同一母表项的子数组中...
addParentItem(2, 'Country B'); // 添加另一个新的母表项...如此类推... 这里的字段是不固定的。
``` 接下来是如何将这些数据展示在HTML表格中： 你可以使用jQuery遍历`parentArray`和`childArray`来动态生成表格的行和列。基本的思路是：为每个母表项创建一个表格行，然后在该行中添加相应的子表项。注意这里的代码只是示意性的，需要根据实际的HTML结构和需求进行调整。```javascript$(document).ready(function() { // DOM加载完成后执行函数来构建表格    var table = $('#myTable'); // 获取表格元素    for (var i = 0; i < parentArray.length; i++) {        // 创建新的表格行        var parentRow = $('<tr>');        // 构建母表的单元格内容并添加到行中        parentRow.append($('<td>').text(parentArray[i].ParentId));        parentRow.append($('<td>').text(parentArray[i].name));        // 添加子表内容        for (var j = 0; j < parentArray[i].Children.length; j++) {            var childRow = $('<tr>');            childRow.append($('<td>').text(parentArray[i].Children[j].ChildId));            childRow.append($('<td>').text(parentArray[i].Children[j].ChildName));            // 将子行添加到当前母表的下方            parentRow.append(childRow);        }        // 将当前母行添加到表格中        table.append(parentRow);    }});```在这个例子中，我们首先遍历`parentArray`来创建每个母表的行。然后遍历每个母表的子数组来创建子表的行，并将它们添加到相应的母表中。这种方式允许动态地添加任意数量的字段和子项。当然，实际使用时还需要处理各种边界情况和用户体验问题，比如表单验证、错误处理等。希望这个例子能帮助你理解如何构建一个不固定字段个数的母子表结构。