基于行跨度修改行 也使用 jQuery 修改

Question

我正在使用一个有两个部分的表格。第一部分有 4 行 第二部分有 3 行。我将td附加到第一部分 行跨度 4 和行跨度为 3 的第二部分。我想使用 jQuery 将行跨度动态附加到每个部分，基于来自 每个部分的数据库。我根据每个部分的第一行附加行跨度。问题是：当我从底部删除行时，它工作正常，但是当我从中间行跨度中删除行时，无法正确附加。请帮我解决这个问题。

$(document).ready(function() {
$('#my_table').on('click', '.delete', function() {
$(this).closest('tr').remove();
});
$('td').click(function() {
var row_index = $(this).parent().index();
console.log(row_index, 'my');
if (row_index == 1) {
console.log(row_index, 'if');
rowspan = '3' > Appended item < /td>" );
$('table tr').eq(2).attr({
name: 'first'
});
$("tr[name='first'] td:last-child").after("<td rowspan='3'>Appended item</td>");
}
if (row_index == 5) {
console.log(row_index, 'if');
$('table tr').eq(6).attr({
name: 'second'
});
$("tr[name='first'] td:last-child").after("<td rowspan='2'>Appended item</td>");
}
});
});

table,
th,
td {
border: 1px solid black;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<table id="my_table">
<tr>
<td>Name</td>
<td>Tokens</td>
<td>action</td>
<td>social</td>
</tr>
<tr name="first">
<td>ins_Ram</td>
<td>1</td>
<td><button class="delete">delete</button></td>
<td rowspan="4">social</td>
</tr>
<tr>
<td>ins_sam</td>
<td>2</td>
<td><button class="delete">delete</button></td>
</tr>
<tr>
<td>ins_dam</td>
<td>3</td>
<td><button class="delete">delete</button></td>
</tr>
<tr>
<td>ins_vam</td>
<td>4</td>
<td><button class="delete">delete</button></td>
</tr>
<tr name="second">
<td>twt_Ram</td>
<td>5</td>
<td><button class="delete">delete</button></td>
<td rowspan="4">social</td>
</tr>
<tr>
<td>twt_sam</td>
<td>6</td>
<td><button class="delete">delete</button></td>
</tr>
<tr>
<td>twt_dam</td>
<td>7</td>
<td><button class="delete">delete</button></td>
</tr>
</table>

Answer 1

我会给你的问题一个建议。我正在使用类和 id 来修改表行和行跨度。

<table id="my_table">
<tr>
<td>Name</td>
<td>Tokens</td>
<td>action</td>
<td>social</td>
</tr>
<tr class="first" id="1">
<td>ins_Ram</td>
<td>1</td>
<td><button class="delete">delete</button></td>
<td rowspan="4" class="first_rowspan">social</td>
</tr>
<tr class="first" id="2">
<td>ins_sam</td>
<td>2</td>
<td><button class="delete">delete</button></td>
</tr>
<tr class="first" id="3">
<td>ins_dam</td>
<td>3</td>
<td><button class="delete" >delete</button></td>
</tr>
<tr class="first" id="4">
<td>ins_vam</td>
<td>4</td>
<td><button class="delete" >delete</button></td>
</tr>
<tr class="second" id="5">
<td>twt_Ram</td>
<td>5</td>
<td><button class="delete" >delete</button></td>
<td rowspan="4" class="second_rowspan">social</td>
</tr>
<tr class="second" id="6">
<td>twt_sam</td>
<td>6</td>
<td><button class="delete" >delete</button></td>
</tr>
<tr class="second" id="7">
<td>twt_dam</td>
<td>7</td>
<td><button class="delete" >delete</button></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$("#my_table").on("click", ".delete", function() {
//alert($(this).parent().parent().prop('className'));
var id = $(this).parent().parent().attr('id');
var tr_class = $(this).parent().parent().prop('className');
$("#"+id).remove();
var allClass = document.getElementsByClassName(tr_class);
var lnth     = allClass.length;
var rowspan  = document.getElementsByClassName(tr_class+'_rowspan');
var rowspan_class = tr_class+'_rowspan';    
//alert(lnth+' '+);
if(lnth>0 && rowspan.length>0){
$('.'+rowspan_class).attr("rowspan", lnth);   
}else if(lnth>0 && rowspan.length==0){
//alert(allClass[0].id);
$("tr#"+allClass[0].id+" > td:last").after('<td 
class="'+rowspan_class+'" rowspan="'+lnth+'">Social</td>');
}else{}
});
});
</script>