我制作了一个可拖放的表格来对产品进行分类。
我的表格是这样的:
<table class="table table-sortable" id="mytab">
<tbody>
[{foreach from=$mylist item=listitem}]
[{assign var="_cnt1" value=$_cnt1+1}]
<tr draggable="true" id="test_variant.[{$_cnt1}]">
<td class="idcount">[{$_cnt1}]</td>
<td class="[{$listclass}]">Productname</td>
<input id="sortcount[{$_cnt1}]" class="sortcount" type="hidden" value="[{$_cnt1}]"/>
</tr>
[{/foreach}]
</tbody>
</table>
我的 jQuery 看起来像这样:
$(function() {
$('.table-sortable tbody').sortable({
handle: 'span'
});
$('.table-sortable tbody').sortable().bind('sortupdate', function(e, ui) {
function updateTable(){
var table = document.getElementById("mytab");
for (var i = 0, row; row = table.rows[i]; i++) {
$( row ).attr("id","test_variant."+i);
$( row ).find(".idcount").text(i);
$( row ).find(".sortcount").val(i+10);
}
}
setTimeout(updateTable, 100);
});
});
问题是,在我拖放我的项目后,dom 或其他东西不再存在。
就像我的系统不会保存拖放的条目(但其他更新但未拖动的条目)。
是什么让我来到这里,因为我不明白它是当我拖动一个项目并尝试像这样访问它时
document.getElementById("sortcount1").value = "200";
它只是说
未捕获的类型错误:无法设置 null 的属性“值”,就像它不存在一样
我访问其他项目没问题。
当我通过单击 chrome devtools 中的元素打开 dom 时,然后返回到控制台并再次尝试它再次工作,就像它需要初始化或其他东西一样。
希望有人能给我提示。
谢谢!
最佳答案
您可以考虑以下示例。
$(function() {
function updateTable(e, ui) {
var t = $(e.target).closest("table");
$("tbody tr", t).each(function(i, el) {
$(el).attr("id", "test_variant." + i);
$(".idcount", el).html(i);
$(".sortcount", el).val(i + 10);
});
}
$('.table-sortable tbody').sortable({
handle: 'span',
update: updateTable
});
});
这将在排序更新后重置表格中的项目。
更新
$(function() {
function updateTable(e, ui) {
var t = $(e.target).closest("table");
$("tbody tr", t).each(function(i, el) {
var c = i + 1;
$(el).attr("id", "test_variant." + c);
$(".idcount", el).html(c);
$(".sortcount", el).val(c + 10);
});
}
$('.table-sortable tbody').sortable({
handle: 'span',
items: "> tr",
update: updateTable
});
});
table {
width: 340px;
}
table tr {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table class="table-sortable">
<thead>
<tr>
<td> </td>
<td>ID</td>
<td>Product Name</td>
</tr>
</thead>
<tbody>
<tr id="test_variant.1">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="idcount">1</td>
<td class="products">Item Name 1
<input id="sortcount-1" class="sortcount" type="hidden" value="11" />
</td>
</tr>
<tr id="test_variant.2">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="idcount">2</td>
<td class="products">Item Name 2
<input id="sortcount-2" class="sortcount" type="hidden" value="12" />
</td>
</tr>
<tr id="test_variant.3">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="idcount">3</td>
<td class="products">Item Name 3
<input id="sortcount-3" class="sortcount" type="hidden" value="13" />
</td>
</tr>
<tr id="test_variant.4">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="idcount">4</td>
<td class="products">Item Name 4
<input id="sortcount-4" class="sortcount" type="hidden" value="14" />
</td>
</tr>
<tr id="test_variant.5">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
<td class="idcount">5</td>
<td class="products">Item Name 5
<input id="sortcount-5" class="sortcount" type="hidden" value="15" />
</td>
</tr>
</tbody>
</table>
测试了代码,它似乎可以正常工作。
关于javascript - 拖放后无法访问元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65536036/