Javascript 表行拖放,获取ID和序列
我正在使用这个插件: 如果我拖放一行,我会在alert中获得被删除的行ID,它会工作 如何获取行序列?我想使用它,用ajax更新图像序列Javascript 表行拖放,获取ID和序列,javascript,jquery,html,Javascript,Jquery,Html,我正在使用这个插件: 如果我拖放一行,我会在alert中获得被删除的行ID,它会工作 如何获取行序列?我想使用它,用ajax更新图像序列 $("#table-2").tableDnD({ onDrop: function(table, row) { var rows = table.tBodies[0].rows; var debugStr = "Row dropped was ID: "+row.id+""; alert(debugStr
$("#table-2").tableDnD({
onDrop: function(table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Row dropped was ID: "+row.id+"";
alert(debugStr);
}
});
我从我的网站soruce复制表源代码,表是由php生成的
<table class="table table-hover table-bordered list" id="table-2">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input class="checkAllCheckboxes" type="checkbox"></td>
<td style="text-align: center;">ID</td>
<td class="left">Kép</td>
<td class="left">Megnevezés</td>
<td style="text-align: center;">Sorrend</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor32">
<td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="32"></td>
<td style="text-align: center;">32</td>
<td class="left"><img class="img-responsive" src="images/homepage_slideshow/492-PS-VR_.jpg" width="200"></td>
<td class="left"></td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<a href="slideshow-szerkesztes.php?id=32"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="32"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor31">
<td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="31"></td>
<td style="text-align: center;">31</td>
<td class="left"><img class="img-responsive" src="images/homepage_slideshow/503-WatchDogs2_FarCrayPrimal_1_.jpg" width="200"></td>
<td class="left"></td>
<td style="text-align: center;">3</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<a href="slideshow-szerkesztes.php?id=31"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="31"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor30">
<td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="30"></td>
<td style="text-align: center;">30</td>
<td class="left"><img class="img-responsive" src="images/homepage_slideshow/324-DeadRising4_megjelent.jpg" width="200"></td>
<td class="left"></td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<a href="slideshow-szerkesztes.php?id=30"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="30"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor24">
<td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="24"></td>
<td style="text-align: center;">24</td>
<td class="left"><img class="img-responsive" src="images/homepage_slideshow/89-FIFA_17_B4jlEln.jpg" width="200"></td>
<td class="left"></td>
<td style="text-align: center;">4</td>
<td style="text-align: center;">Intaktív</td>
<td class="right">
<a href="slideshow-szerkesztes.php?id=24"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="24"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor23">
<td class="left"><input class="table_row_checkbox" name="selectedRows[]" type="checkbox" value="23"></td>
<td style="text-align: center;">23</td>
<td class="left"><img class="img-responsive" src="images/homepage_slideshow/90-konzolkiraly_sl_1467362325.jpg" width="200"></td>
<td class="left"></td>
<td style="text-align: center;">3</td>
<td style="text-align: center;">Intaktív</td>
<td class="right">
<a href="slideshow-szerkesztes.php?id=23"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a class="deleteLink" href="#" id="23"><span class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
</tbody>
</table>
这就是你需要的
试试这个
$("#table-2").tableDnD(
{
onDrop: function(table, row)
{
var rows = table.tBodies[0].rows;
alert("Index: " + $(row).index());
var debugStr = "Row dropped was ID: "+row.id+"";
alert(debugStr);
}
});
或
这就是你需要的
试试这个
$("#table-2").tableDnD(
{
onDrop: function(table, row)
{
var rows = table.tBodies[0].rows;
alert("Index: " + $(row).index());
var debugStr = "Row dropped was ID: "+row.id+"";
alert(debugStr);
}
});
或
请在您的问题中包含所需的回答。我不确定你想得到什么我想得到我掉下来的那一行,是哪一行。示例:删除后,该行是第一行,或是第二行…请在您的问题中包含所需的回答。我不确定你想得到什么我想得到我掉下来的那一行,是哪一行。示例:落下后,该行是第一行,或是第二行…谢谢!我发现我需要索引,但你更快了!:)非常感谢。我发现我需要索引,但你更快了!:)
$("#table-2").tableDnD(
{
onDrop: function(table, row)
{
var rows = table.tBodies[0].rows;
alert("Index: " + $(row).index());
var debugStr = "Row dropped was ID: "+row.id+"";
alert(debugStr);
}
});
var item = document.getElementById(row.id);
alert("Index: " + $(rows).index(item));