布局：具有“展开”按钮的行的表格。展开按钮显示该行的所有子行，所有这些子行都与父行共享一些公共数据。
目标：在父母之间拖拽孩子；即将数据的某个子集移动到另一个集合，并根据新父级的数据自动编辑某些字段。
到目前为止，我有一张带有扩展子行的表格，但我无法理解如何让孩子们可以在父母之间拖动。我也不希望能够重新排序父行，它们应该是静态的。该表是动态创建的，数据是从数据库中获取的。
桌子：
<table id="loot-table" class="table table-striped">
<thead>
<tr>
<th>Min Level Required</th>
<th>Min Tokens Required</th>
<th>Type of Loot Dropped</th>
<th>Loot Group</th>
<th>Name of Loot Dropped</th>
<th>Quantity of Loot Dropped</th>
<th>Weight of Loot Dropped</th>
<th>Loot Is Available:</th>
</tr>
</thead>
<tbody>
<?php $loot_group_count=-1; foreach($event['lockbox_loot'] as $lockbox_loot){ $loot_group_count++; ?>
<tr class="loot-header-row">
<td><input type="number" value="<?php echo $lockbox_loot['min_level_required']; ?>"></td>
<td><input type="number" value="<?php echo $lockbox_loot['min_tokens_required']; ?>"></td>
<td><input name="loot_group_id[<?php echo $loot_group_count; ?>]" type="text" value="<?php echo $lockbox_loot['loot_group_id']; ?>"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#" class="loot-table-expand-btn" data-group-id="<?php echo $loot_group_count; ?>">Expand</a></td>
</tr>
<?php if($loot){ $i=-1; foreach($loot as $lootitem){
if($lockbox_loot['loot_group_id'] === $lootitem['loot_group_id']){ $i++; ?>
<tr class="loot-row-<?php echo $loot_group_count; ?> hide">
<td></td>
<td></td>
<td><input name="item_loot_group_id[<?php echo $loot_group_count; ?>][<?php echo $i; ?>]" type="text" value="<?php echo $lootitem['loot_group_id']; ?>" disabled="disabled"></td>
<td>
<select name="loot-type[<?php echo $i; ?>]">
<option value="money" <?php if($lootitem['loot_type']==="money"){echo "selected";}; ?>>Money</option>
<option value="respect" <?php if($lootitem['loot_type']==="respect"){echo "selected";}; ?>>Respect</option>
<option value="item" <?php if($lootitem['loot_type']==="item"){echo "selected";}; ?>>Item</option>
<option value="mafia" <?php if($lootitem['loot_type']==="mafia"){echo "selected";}; ?>>Mafia</option>
</select>
</td>
<td><input name="loot_id[<?php echo $i; ?>]" type="text" value="<?php echo $lootitem['loot_id']; ?>"></td>
<td><input name="quantity[<?php echo $i; ?>]" type="number" min="0" value="<?php echo $lootitem['quantity']; ?>"></td>
<td><input name="loot_weight[<?php echo $i; ?>]" type="number" min="0" value="<?php echo $lootitem['loot_weight']; ?>"></td>
<td><input name="is_available[<?php echo $i; ?>]" type="checkbox" value="<?php echo $lootitem['is_available']; ?>" <?php if($lootitem['is_available']){echo "checked";}; ?>></td>
</tr>
<?php }}}} ?>
</tbody>
</table>
用于扩展隐藏单元格的 JQuery 代码：
$(".loot-table-expand-btn").each(function() {
$(this).on('click', function(){
var group_id = $(this).attr('data-group-id');
$('.loot-row-' + group_id).each(function(){
if($(this).is(":visible")) {
hidden = true;
$(this).hide();
} else {
hidden = false;
$(this).show();
}
});
if(hidden) {
$(this).html('Expand');
} else {
$(this).html('Collapse');
}
return false;
});
});