Question

我正在使用这个插件：https://github.com/isocra/TableDnD/blob/master/index.html

如果我拖累＆amp;删除一行，我在警报中得到删除的行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);
    }
});

我从我的网站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>

更新

如果我删除第一行的ID 24行，它会更新，没关系。但是ID 30行保持在实际位置（序列1）。

我该怎么办？

$("#table-2").tableDnD(
    {
        onDrop: function(table, row) 
        {
            var rows = table.tBodies[0].rows;
            var RowID = row.id.substr(3);
            var RowIndex = $(row).index() + 1;
            $.ajax({
                data: { RowID:RowID, RowIndex:RowIndex },
                type: 'POST',
                url: 'files/update_slide_index.php',
                success: function(data) 
                {
                    var result = $.trim(data);
                    $('#newsletterResult').html(result);
                    $('#newsletterModal').modal('show');
                },
                complete: function()
                {
                    setTimeout(function() 
                    {
                        location.reload();  
                    }, 3000 );  
                }
            });

        }
    });


<?php
include_once("../../files/connect.php");
if(isset($_POST['RowID']))
{
    $RowID = intval($_POST['RowID']);
    $RowIndex = intval($_POST['RowIndex']);

    $sql = "UPDATE slideshow SET slide_sorrend = '$RowIndex' WHERE slide_id = '$RowID'";
    mysqli_query($kapcs, $sql) or die(mysqli_error($kapcs));

    echo 'A kép sorrendje sikeresen megváltozott.';
}
else
{
    echo 'Nincs ID';
}
?>

更新2：

也许这个？

mysqli_query($kapcs, "UPDATE slideshow SET slide_sorrend = slide_sorrend + 1  WHERE slide_id != '$RowID'") or die(mysqli_error($kapcs));

Answer 1

jQuery .index()就是您所需要的。

试试这个

$("#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));

表行删除，获取ID和序列

1 个答案: