1.需求
2.完整的html的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 jQuery 库，这里使用了 Google 的 CDN 地址 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<style>
/* 为表格中的 td 元素添加边框样式 */
td {
border: 1px solid
border-radius: 3px; /* 边框圆角为 3px */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影效果 */
}
/* 为表头的 td 元素添加不同的背景颜色和字体加粗 */
tr.no_top_border td {
background-color:
font-weight: bold; /* 表头字体加粗 */
}
.input_class{
width: 80%;
height: 30px;
text-align: center;
}
</style>
<table id="table_type_sum_id" width="100%" cellpadding="3" cellspacing="3" border="0" style="width:100%" >
<tr class="no_top_border" style="height: 35px;">
<td style="width:8%; text-align:center;font-weight: bold;" >
<div>
<span id="copy_select" class="select_option" style="color:blue;font-size: 25px;cursor:hand;text-align: left;position: relative;height: 10%;left: 1%;top: 1px;">+</span>
<span style="text-align: center;font-weight: bold;">类别</span>
</div>
</td>
<td style="width:10%; text-align:center;font-weight: bold;" >总额</td>
<td style="width:10%; text-align:center;font-weight: bold;" >折扣率</td>
<td style="width:10%; text-align:center;font-weight: bold;" >金额</td>
<td style="width:10%; text-align:center;font-weight: bold;" >金额</td>
<td style="width:27%; text-align:center;font-weight: bold;" >备注</td>
<td style="width:20%; text-align:center;font-weight: bold;" >归属</td>
</tr>
<tr class="" style="height: 35px;">
<td style="width:15%;text-align:center;" >
<div style="width: 60%;margin:auto;font-weight: bold;">
1111
</div>
</td>
<td style="width:8%; text-align:center;">
<input type="text" name="type_sum_fee_{$vv.type_sum}" id="type_sum_fee_{$vv.type_sum}" class="form-control-ele input_class type_sum_fee_class" value="" />
</td>
<td style="width:10%; text-align:center;" >
<input type="text" name="type_sum_rate_{$vv.type_sum}" id="type_sum_rate_{$vv.type_sum}" class="form-control-ele input_class type_sum_rate_class" value="" />
</td>
<td style="width:8%; text-align:center;">
<input type="text" name="discount_fee_{$vv.type_sum}" id="discount_fee_{$vv.type_sum}" class="form-control-ele input_class discount_fee_class" value="" />
</td>
<td>
<input type="text" name="type_sum_jisuan_fee_{$vv.type_sum}" id="type_sum_jisuan_fee_{$vv.type_sum}" class="form-control-ele input_class type_sum_jisuan_fee_class" value="" />
</td>
<td>
<textarea type="text" class="form-control-ele" name="notes_{$vv.type_sum}" id="notes_{$vv.type_sum}" style="width:98%; height:50px;"></textarea>
</td>
<td style="padding: 10px;">
<label><span style="vertical-align: middle;">类型1</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="4"></label>
<label><span style="vertical-align: middle;">类型2</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="1"></label>
<label><span style="vertical-align: middle;">类型3</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="2"></label>
<label><span style="vertical-align: middle;">类型4</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="3"></label>
<label><span style="vertical-align: middle;">类型5</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="5"></label>
<label><span style="vertical-align: middle;">类型6</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="6"></label>
<label><span style="vertical-align: middle;">类型7</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type_4" value="7"></label>
</td>
</tr>
<tr class="del_rukou" id="copy_rukou" style="display: none;"></tr>
</table>
<table width="100%" id="copy_table_id" cellpadding="3" cellspacing="3" border="0" style="width:100%;display: none;" >
<tr id="get_copy_all_td" style="height: 35px;">
<td style="width:15%;text-align:center;" >
<div style="width: 60%;margin:auto;font-weight: bold;">
<div style="display:flex;align-items:center;">
<span onclick="removeTr(this)" style="color:blue;font-size: 35px;cursor:hand;">-</span>
<input type="text" name="type_sum_name[1]" id="type_sum_name[1]" class="form-control-ele input_class " value="" style="margin-left:5px;" />
</div>
</div>
</td>
<td style="width:8%; text-align:center;">
<input type="text" name="type_sum_fee[1]" id="type_sum_fee[1]" class="form-control-ele input_class type_sum_fee_class" value="" />
</td>
<td style="width:10%; text-align:center;" >
<input type="text" name="type_sum_rate[1]" id="type_sum_rate[1]" class="form-control-ele input_class" value="" />
</td>
<td style="width:8%; text-align:center;">
<input type="text" name="discount_fee[1]" id="discount_fee[1]" class="form-control-ele input_class" value="" />
</td>
<td>
<input type="text" name="type_sum_jisuan_fee[1]" id="type_sum_jisuan_fee[1]" class="form-control-ele input_class type_sum_jisuan_fee_class" value="" />
</td>
<td>
<textarea type="text" class="form-control-ele" name="notes[1]" id="notes[1]" style="width:98%; height:50px;"></textarea>
</td>
<td style="padding: 10px;">
<label><span style="vertical-align: middle;">类型1</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="4"></label>
<label><span style="vertical-align: middle;">类型2</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="1"></label>
<label><span style="vertical-align: middle;">类型3</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="2"></label>
<label><span style="vertical-align: middle;">类型4</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="3"></label>
<label><span style="vertical-align: middle;">类型5</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="5"></label>
<label><span style="vertical-align: middle;">类型6</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="6"></label>
<label><span style="vertical-align: middle;">类型7</span> <input onclick="handleRadioClick(this)" class="radio_change" style="" type="radio" name="attr_type[1]" value="7"></label>
</td>
</tr>
</table>
</html>
<script>
//复制tr
$(function () {
$(".select_option").click(function (){
// alert('123');
add_tr('copy_rukou');
})
})
function add_tr(id) {
// 创建新的tr元素
var newRow = $('<tr style="height: 35px;"></tr><tr id="copy_rukou2" class="del_rukou2" style="display: none;"></tr>');
//ajax获取添加的复制数据
var tr_str = get_tr_fee()
// 在新tr元素中添加数据
newRow.html(tr_str); // 这里可以根据需要添加更多的数据
// console.log('newRow=')
// console.log(newRow)
// 将新的tr元素插入到指定id的tr元素之后
$(').after(newRow);
//把第一个复制的定位的id删除，不然复制的数据在上面，不在下面
$('.del_rukou').remove();
//替换class，如果使用一样的class会都删除
$(".del_rukou2").attr("id", "copy_rukou");
$(".del_rukou2").attr("class", "del_rukou");
// 通过id选择器找到tr并删除其下所有td,因为数据会污染，导致name同名冲突，删除一样的tr。
$(').find('td').remove();
}
function get_tr_fee() {
//获取tr下面的全部td
const sourceTr = document.querySelector('#get_copy_all_td');
// 遍历源 tr 中的所有 td 元素
const tds = sourceTr.querySelectorAll('td');
let tdStrings = '';
tds.forEach(td => {
tdStrings += td.outerHTML;
});
//下面的js代码是为了解决，attr_type[1]，的name一样，导致复制的tr的选中都一样,s
// 把复制的字符串加1，[1]+1
tdStrings = tdStrings.replace(/\[(\d+)\]/g, function(match, num) {
return '[' + (parseInt(num) + 1) + ']';
});
// 把复制的数据，也自加1，[1]+1
const copyTable = document.querySelector('#copy_table_id');
if (copyTable) {
const copyTableHtml = copyTable.innerHTML;
copyTable.innerHTML = copyTableHtml.replace(/\[(\d+)\]/g, function(match, num) {
return '[' + (parseInt(num) + 2) + ']';
});
}
//下面的js代码是为了解决，attr_type[1]，的name一样，导致复制的tr的选中都一样,e
return tdStrings;
}
//删除事件
function removeTr(e){
$(e).parents("tr").remove();
yusuan_change_fee();
}
</script>
3.扩展
4.解决
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
