layui table表格动态增加、合并单元格

现需要一个两列多行的页面布局，实现对单选按钮监听和在左侧保持合并单元格的同时新增、删除、清空tr，并将填写的内容取值json

<!--部分table代码如下-->
<tr>
	<td colspan="2" rowspan="2" id="xzParentNode">正面内容</td>
	<td style="text-align: left;">
		<div class="layui-form" id="zmpjContainer" >
			<input type="radio" name="zmpj" value="0" title="无" checked>
	  		<input type="radio" name="zmpj" value="1" title="有" > 
 		</div>
 	</td>
</tr>
<tr>
	<td id="xzParentNode" style="text-align: left;" class="zmpjContainerClass" >
		<span style="float: right;margin-right: 23%;margin-top: 0px;height: 30px;line-height: 30px;padding: 0 5px;font-size: 12px;">
			<i class="layui-icon layui-icon-add-1" onclick="addlist(this)"></i> 
			<i class="layui-icon layui-icon-delete" onclick="cleanRow(this)"></i> 
		</span>
		<input type="text" name="jfx" onblur="addjfx()" placeholder="填写内容" class="layui-input" style="width:70%">
 	</td>
</tr>

在监听中写

	var zmpjContainer = document.getElementById('zmpjContainer');
	zmpjContainer.addEventListener('click', function(event) {
	    zmpjxs();
	});

调用外部方法

	function zmpjxs(){
	    var zmpjxs =  document.querySelector('input[name="zmpj"]:checked').value;
	    var zmpjContainer = document.getElementById('zmpjContainer'); // 获取 fmpjContainer 元素
	    var parentTr = zmpjContainer.parentElement.parentElement; // 获取 fmpjContainer 所在的 tr 元素的父元素
	    var table = parentTr.parentElement; // 获取表格元素
	    if(zmpjxs === "0"){
	    	zmpjContainerHidden = false;
	        $('.zmpjContainerClass').addClass('hidden');
	    } else {
	    	zmpjContainerHidden = true;
	        // 如果值不等于 1，移除相应的行
	        $('.zmpjContainerClass').removeClass('hidden');
	    }
	}

新增tr方法

	function addlist(element) {
	    // 找到当前被点击的元素所在的父元素
	    var parentTr = element.closest('tr');
	    // 创建一个新的<tr>元素
	    var newRow = document.createElement("tr");
	    newRow.innerHTML = '<td style="text-align: left;" class="zmpjContainerClass"><span style="float: right;margin-right: 23%;margin-top: 0px;height: 30px;line-height: 30px;padding: 0 5px;font-size: 12px;"><i class="layui-icon layui-icon-add-1" onclick="addlist(this)"></i> <i class="layui-icon layui-icon-delete"  onclick="deleteRow(this)"></i> </span><input type="text" name="jfx" onblur="addjfx()" placeholder="填写专业" class="layui-input" style="width:70%"></td>';
	    // 将新的<tr>元素插入到当前<tr>元素的后面
	    parentTr.parentNode.insertBefore(newRow, parentTr.nextSibling);
	    // 通过id获取包含"正面评价"的单元格
	    var positiveCell = document.getElementById('xzParentNode');
	    if (positiveCell) {
	        // 获取当前的rowspan值并加1
	        var rowspanValue = parseInt(positiveCell.getAttribute('rowspan'));
	        positiveCell.setAttribute('rowspan', rowspanValue + 1);
	    }
	}

移除tr方法

	function deleteRow(element) {
	    // 找到当前被点击的元素所在的父元素
	    var parentTr = element.closest('tr');
	    // 删除当前行
	    parentTr.parentNode.removeChild(parentTr);
	    // 通过id获取包含"正面评价"的单元格
	    var positiveCell = document.getElementById('xzParentNode');
	    if (positiveCell) {
	        // 获取当前的rowspan值并加1
	        var rowspanValue = parseInt(positiveCell.getAttribute('rowspan'));
	        positiveCell.setAttribute('rowspan', rowspanValue - 1);
	    }
	    addjfx();
	}

清除tr方法

	function cleanRow(element) {
	    // 找到当前被点击的元素所在的父元素
	    var parentTd = element.closest('td');
	    // 找到当前被点击元素所在的td下的input元素
	    var inputElement = parentTd.querySelector('input');
	    // 清空input的内容
	    inputElement.value = '';
	    addjfx();
	}

计数

	function addjfx() {
		var inputs = document.getElementsByName('jfx');
		var lineCount = 0;
		for (var i = 0; i < inputs.length; i++) {
			if (inputs[i].value.trim() !== '') {
				lineCount++;
			}
		}
	}

	//获取所有输入input	组成json
	var inputs = document.getElementsByName('jfx');
    var data = {};
    for (var i = 0; i < inputs.length; i++) {
         var value = inputs[i].value.trim();
         //过滤没填写的内容
         if (value !== "") {
              saveZmpjFs += 5 ;
              data["input_" + (i + 1)] = value;
         }
    }
	//正面评价输入的内容
    JSON.stringify(data);