1
theadとtbodyの一意のIDを持つテーブルを含むコンテンツでポップオーバーを設定しました。ブラウザのコンソールに手動でdocument.getElementById("servicesEx-popTable_content");を書き込むと、コンソールに私にその要素が表示されます。私は動的にinnerHTMLを設定した場合でも、エラーがCannot read property 'innerHTML' of null.ダイナミックポップオーバーコンテンツから要素IDを取得
私は、チェックボックスをチェックすると、行がtbodyに挿入されなければならないと私は、チェックボックスのチェックを外したときに、挿入した行を削除する必要が言います。
document.addEventListener("click", function(x) {
if (x.target && x.target.id === "cbox") {
if (x.target.checked === true) {
var t = document.getElementById("servicesEx-popTable_content");
t.innerHTML += "<tr><td id='popover-1'></td>some name<td>1</td><td>$50</td></tr>";
} else {
var t = document.getElementById("popover-1");
t.parentNode.removeChild(t);
}
}
});
$(function() {
$('[data-toggle="popoverEx"]').popover({
container: 'body',
placement: 'bottom',
html: true,
viewport: 'body',
content: function() {
return "<table class='table services-popTable'><thead><tr><th>Name</th><th>Quantity</th><th>Price</th></tr></thead><tbody id='servicesEx-popTable_content'></tbody></table>";
}
});
});<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<span style="cursor: pointer;" data-toggle="popoverEx" data-content="">Click to see popover</span>
<label for="cbox">Click me</label>
<input type="checkbox" id="cbox">
</div>
</body>