Jquery 数据表 div 作为弹出窗口
Jquery Datatable div as popover
我正在使用 Jquery 数据表,每次点击 td 时,我都试图将当前的 td 值绑定到现有的文本框。我将 div 作为弹出窗口获取,但该值未被绑定。同样在第一次点击时,弹出窗口没有显示,有人可以帮助我吗
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
$('#example').DataTable({
responsive: true
});
$("#example").on("click", 'tr td:not(:first-child)', function() {
$("#txtDynamic").val($(this).text());
$('.change-trigger').not(this).popover('hide');
$('.change-trigger').popover({
placement: 'Right',
html: true,
content: function() {
var content = '';
content = $('#select-div').html();
return content;
}
}).on('shown.bs.popover', function() {});
});
});
Fiddle 关于我的尝试
要在第一次点击时显示弹出窗口,您需要执行 $('.change-trigger').popover("show");
,因为默认情况下,弹出窗口只会在 $('.change-trigger')
单击时显示,而不是在其兄弟点击时显示。
如果你想保留弹出窗口并在点击时更新每个兄弟的文本,你可以这样做:
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
$('#example').DataTable({
responsive: true
});
$("#example").on("click", 'tr td:not(:first-child)', function() {
$("#txtDynamic").val($(this).text());
//get the .change-trigger of the parent tr
var pop=$(this).siblings(".change-trigger");
//hide all .change-trigger popovers except for the active one
$('.change-trigger').not(pop).popover('hide');
//show the popover
pop.popover("show");
});
//you can create the popover outside td click
$('.change-trigger').popover({
placement: 'Right',
html: true,
content: function() {
var content = '';
//clone() get updated #txtDynamic value
//contents() omits the class="invisible" of #select-div
//html() always gets default input value on popover
content = $('#select-div').clone().contents();
return content;
}
}).on('shown.bs.popover', function() {});
$(".change-trigger").off("click");//disable popover("show") on .change-trigger
});
你可以使用datatable的cell方法获取table的点击td的值。这是 js fiddle
<input type="text" id="tdvalue">
<table width="100%" id="example">
<thead style="background:#C0C0C0;">
<tr>
<th style="padding-left: 15px;"> Id </th>
<th> Product Name </th>
<th> Total Events </th>
<th> Total Revenue </th>
<th> Rental Time </th>
</tr>
</thead>
<tbody>
<td data-content="Brielle Williamson" data-placement="bottom" rel="popover">Brielle Williamson</td>
<td data-content="Integration Specialist" data-placement="bottom" rel="popover">Integration Specialist</td>
<td data-content="2,000" data-placement="bottom" rel="popover">2,000</td>
<td data-content="New York" data-placement="bottom" rel="popover">New York</td>
<td data-content="4804" data-placement="bottom" rel="popover">4804</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'td', function () {
value = table.cell( this ).data();
$("#tdvalue").val(value);
$(this).popover("show");
} );
} );
我正在使用 Jquery 数据表,每次点击 td 时,我都试图将当前的 td 值绑定到现有的文本框。我将 div 作为弹出窗口获取,但该值未被绑定。同样在第一次点击时,弹出窗口没有显示,有人可以帮助我吗
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
$('#example').DataTable({
responsive: true
});
$("#example").on("click", 'tr td:not(:first-child)', function() {
$("#txtDynamic").val($(this).text());
$('.change-trigger').not(this).popover('hide');
$('.change-trigger').popover({
placement: 'Right',
html: true,
content: function() {
var content = '';
content = $('#select-div').html();
return content;
}
}).on('shown.bs.popover', function() {});
});
});
Fiddle 关于我的尝试
要在第一次点击时显示弹出窗口,您需要执行 $('.change-trigger').popover("show");
,因为默认情况下,弹出窗口只会在 $('.change-trigger')
单击时显示,而不是在其兄弟点击时显示。
如果你想保留弹出窗口并在点击时更新每个兄弟的文本,你可以这样做:
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
$('#example').DataTable({
responsive: true
});
$("#example").on("click", 'tr td:not(:first-child)', function() {
$("#txtDynamic").val($(this).text());
//get the .change-trigger of the parent tr
var pop=$(this).siblings(".change-trigger");
//hide all .change-trigger popovers except for the active one
$('.change-trigger').not(pop).popover('hide');
//show the popover
pop.popover("show");
});
//you can create the popover outside td click
$('.change-trigger').popover({
placement: 'Right',
html: true,
content: function() {
var content = '';
//clone() get updated #txtDynamic value
//contents() omits the class="invisible" of #select-div
//html() always gets default input value on popover
content = $('#select-div').clone().contents();
return content;
}
}).on('shown.bs.popover', function() {});
$(".change-trigger").off("click");//disable popover("show") on .change-trigger
});
你可以使用datatable的cell方法获取table的点击td的值。这是 js fiddle
<input type="text" id="tdvalue">
<table width="100%" id="example">
<thead style="background:#C0C0C0;">
<tr>
<th style="padding-left: 15px;"> Id </th>
<th> Product Name </th>
<th> Total Events </th>
<th> Total Revenue </th>
<th> Rental Time </th>
</tr>
</thead>
<tbody>
<td data-content="Brielle Williamson" data-placement="bottom" rel="popover">Brielle Williamson</td>
<td data-content="Integration Specialist" data-placement="bottom" rel="popover">Integration Specialist</td>
<td data-content="2,000" data-placement="bottom" rel="popover">2,000</td>
<td data-content="New York" data-placement="bottom" rel="popover">New York</td>
<td data-content="4804" data-placement="bottom" rel="popover">4804</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'td', function () {
value = table.cell( this ).data();
$("#tdvalue").val(value);
$(this).popover("show");
} );
} );