嵌套表中的操作按钮表级别的制表符以添加和删除行

Question

我有一个这样的制表符

function show_containers(frm){

    var nestedData = [
        {container:1, item_code:'Black Marble', uom:'Square Meter', qty:325, batches:[
            {
            batch:'B123456', length:10, width:8, count:10, total_sqmt: 800, deduction:0.00, net_sqmt:800, 
                sheets: [
                    {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                    {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                    {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800}
                ]
            },
            {
            batch:'B123456', length:10, width:8, count:10, total_sqmt: 800, deduction:0.00, net_sqmt:800, 
                sheets: [
                    {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                    {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                    {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800}
                ]
            },
        ]},
        {container:1, item_code:'Black Marble', uom:'Square Meter', qty:325, batches:[
            {
         batch:'B123456', length:10, width:8, count:10, total_sqmt: 800, deduction:0.00, net_sqmt:800, 
             sheets: [
                 {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                 {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                 {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800}
             ]
         },
         {
         batch:'B123456', length:10, width:8, count:10, total_sqmt: 800, deduction:0.00, net_sqmt:800, 
             sheets: [
                 {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                 {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800},
                 {sheet:'S123456', length:10, width:8, total_sqmt: 800, deduction:0.00, net_sqmt:800}
             ]
         },
        ]}
    ]


    //define table
    var table = new Tabulator("#tabulator", {
        height:"100%",
        layout:"fitColumns",
        columnDefaults:{
        resizable:true,
        },
        data:nestedData,
        columns:[
            {title:"Container", field:"container"},
            {title:"Item Code", field:"item_code"},
            {title:"UOM", field:"uom"},
            {title:"Qty", field:"qty"},
        ],
        rowFormatter:function(row){
            //create and style holder elements
            var holderEl = document.createElement("div");
            var batchtableEl = document.createElement("div");

            holderEl.style.boxSizing = "border-box";
            holderEl.style.padding = "10px 10px 10px 30px";
            holderEl.style.borderTop = "1px solid #333";
            holderEl.style.borderBotom = "1px solid #333";
            

            batchtableEl.style.border = "1px solid #333";

            holderEl.appendChild(batchtableEl);

            row.getElement().appendChild(holderEl);

            var subTable = new Tabulator(batchtableEl, {
                height:"100%",
                layout:"fitColumns",
                data:row.getData().batches,
                columns:[
                {title:"Batch", field:"batch"},
                {title:"Length", field:"length"},
                {title:"Width", field:"width"},
                {title:"Count", field:"count"},
                {title:"Total SqMt", field:"total_sqmt"},
                {title:"Deduction", field:"deduction"},
                {title:"Net SqMt", field:"net_sqmt"},
                ],
                rowFormatter:function(row){
                    //create and style holder elements
                    var holderEl = document.createElement("div");
                    var sheettableEl = document.createElement("div");
        
                    holderEl.style.boxSizing = "border-box";
                    holderEl.style.padding = "10px 10px 10px 30px";
                    holderEl.style.borderTop = "1px solid #333";
                    holderEl.style.borderBotom = "1px solid #333";
                    
        
                    sheettableEl.style.border = "1px solid #333";
        
                    holderEl.appendChild(sheettableEl);
        
                    row.getElement().appendChild(holderEl);
        
                    var subTable = new Tabulator(sheettableEl, {
                        height:"100%",
                        layout:"fitColumns",
                        data:row.getData().sheets,
                        columns:[
                        {title:"Sheet", field:"batch"},
                        {title:"Length", field:"length"},
                        {title:"Width", field:"width"},
                        {title:"Total SqMt", field:"total_sqmt"},
                        {title:"Deduction", field:"deduction"},
                        {title:"Net SqMt", field:"net_sqmt"},
                        ]
                    })
                },
            })
        },
    });
}

我想在 Containers 和 Batches 表的级别添加操作按钮来添加和删除行

我希望这些按钮可以添加新行和删除选定的行，我希望它在表格级别

最后一张表格将没有操作按钮。

我不想使用外部操作按钮。