我有一个函数可以显示里面有一个表格的分区。在thead区域将有一个输入类型和一个标签。首先显示标签,如果单击标签,它将隐藏,输入类型将显示。如果你点击分区外,它工作正常。但是如果你点击分区或表格内部它没有任何作用。这是我的功能。
$('.add-header').on('click',function(){
var header = $(this).parent().find('#header-name').val();
$('tbody.content').prepend('<div class="groupborder" style="border-color:#333333"><tr> \
<td> \
<table class="tables_details" style="width:100%;"> \
<th id="groups" data-id="'+headcount+'" style="background-color: #333333; width: 100%;" > \
<label style="display:inline-block;float:left; margin-left:900px; width:60px; font-weight: bold; color:#FFFFFF;">\
Sub-total:\
</label> \
<label class="head" style="margin-bottom:-4px;width:300px;height:20px;border:1px solid red;display: block; margin-left: -930px; float: left; font-size: 11px;; color:#FFFFFF;">\
HEADER '+headcount+'\
</label> \
<input type="text" name="header_name[]" class="edit-input" style="width:300px;height:20px; display: none; margin-left: -930px; float: left; padding-left:5px;" value="HEADER '+headcount+'"/> \
<input class="header_id" name="header_id[]" type="hidden" value="'+headcount+'"> \
<a href="" class="rm-header fa fa-times-circle fa-lg" style="float:right; margin-right:5px; margin-top:5px"></a> \
<label style="display:inline-block; float:right; margin-right:30px; font-weight: bold; color:#FFFFFF;" class="total" id="total_'+headcount+'" data-sub_id="'+headcount+'">0.00</label></th> \
<input name="header_subtotal[]" class="stotal" id="stotal_'+headcount+'" type="hidden" value="0.00"> </th> \
<tbody class="subcontent tbody"></tbody> \
</table>\
</td> </tr></div>');
// header tweak
var dad = $(this).parent().parent();
edit(dad);
$('.head').on('click', function(){
var dad = $(this).parent().parent();
edit(dad);
})
sort();
headcount+=1;
$('.rm-header').on('click',function(){
a = $(this);
headrm(a);
return false;
})
})
function edit(dad){
dad.find('.head:first').hide();
dad.find('.edit-input:first').show().focus().select();
$('.edit-input').focusout(function(){
var dad = $(this).parent();
var x = $(this).parent().find('.edit-input').val();
$(this).hide();
dad.find('.head').text(x).show();
});
}