使用 Jquery 删除多行

Question

我正在尝试使用checkbox 从我的 sql 数据库中删除行。只要只有一个 checkbox 标记，这就可以正常工作。但我也希望可以删除多行。我看过很多例子，但我无法让它工作。希望这里的任何人都可以帮助我。

所以首先是 result.php 文件（这里是创建的所有行/表）：

    while ($row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_BOTH)) {
        echo "<tr>";
        echo "<td><input type='checkbox' name='id[]' class='toedit' value='" . $row[0] . "'></td>";
        echo "<td>" . $row[1] . "</td>";
        echo "<td>" . $row[2] . "</td>";
        echo "</tr>";
    }

    echo "</table>";

这个文件包含在我的主 html (main.html) 文件中，这里也是 Jquery。

Jquery 发送 chechbox 变量到 delete.php 文件：

    <script type="text/javascript">
    $(".deletelogg").on('click', function(){
            $.ajax({
                type: 'POST',
                url: "php/delete.php",
                data:  {id:$('.toedit:checked:first').val()},
                success: function(data) {
                    alert(data);
                    $("p").text(data);
                }
            });
   });
   </script>

最后在我的 delete.php 文件中：

include 'connect-database.php';

for ($i = 0; $i < count($_POST['id']); $i++) {
    if ($_POST['id'][$i] != "") {
        echo $_POST['id'] ;
        $sql = "DELETE FROM Logg Where LoggID LIKE '".$_POST['id']."'";
        $stmt = sqlsrv_query( $conn, $sql);
        if ($stmt == false) {
            die( print_r(sqlsrv_errors(), true) );
        }
    }  
}

我试图创建一个包含来自checkbox 的所有id 的数组，但它不起作用.. 有什么帮助吗？

Answer 1

一个工作示例：http://jsfiddle.net/Twisty/1y4zy5mn/

您应该遍历您的复选框并收集值。给定以下 HTML：

<table>
    <tr>
        <td>
            <input type="checkbox" name="id[]" class="toedit" value="1" />
        </td>
        <td>One</td>
        <td>Fish</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id[]" class="toedit" value="2" />
        </td>
        <td>Two</td>
        <td>Fish</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id[]" class="toedit" value="3" />
        </td>
        <td>Red</td>
        <td>Fish</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id[]" class="toedit" value="4" />
        </td>
        <td>Blue</td>
        <td>Fish</td>
    </tr>
</table>
<button class="deletelogg">Delete</button>
<p></p>

您的 JQuery 需要做更多的工作。这应该适用于 1 个或多个：

$(".deletelogg").on('click', function () {
    var ids = [];
    $(".toedit").each(function () {
        if ($(this).is(":checked")) {
            ids.push($(this).val());
        }
    });
    if (ids.length) {
        $.ajax({
            type: 'POST',
            url: "php/delete.php",
            data: {
                id: ids
            },
            success: function (data) {
                alert(data);
                $("p").text(data);
            }
        });
    } else {
        alert("Please select items.");
    }
});

有了这个，你也可以切换到foreach() 循环：

include 'connect-database.php';

foreach ($_POST['id'] as $id) {
    echo $id;
    $sql = "DELETE FROM Logg Where LoggID = $id";
    $stmt = sqlsrv_query( $conn, $sql);
    if ($stmt == false) {
        die( print_r(sqlsrv_errors(), true) );
    }  
}

Answer 2

我会这样做：首先制作一个“checkAll”复选框，当被选中时，选中所有复选框。然后在表格的末尾，放置“删除”按钮。按下此选项时，将删除所有选中的复选框。我认为这甚至适用于某些复选框（如果您只选中其中一些，而不是全部）。

<div id="content"></div>

<input type="checkbox" id="checkAll">

//get all the rows from db here, or make them manually
<input type="checkbox" class="check" name="checkbox" value="<?php echo $row->id;?>">
//...

然后，使用这段 js 代码，您可以检查它们全部或其中的一部分，并将它们“发送”到服务器端脚本，该脚本将抓取它们，并将它们从数据库中删除。

var checkBoxes = document.getElementsByTagName('input');
var param = "";
var params = [];
for (var counter=0; counter < checkBoxes.length; counter++) {
    if (checkBoxes[counter].type.toUpperCase()=='CHECKBOX' && checkBoxes[counter].checked == true) {
        param += checkBoxes[counter].value+' ';
        params = param;
    }
}
$.ajax({
    type: "POST",
    url: "path/to/server/side/script",
    data: { params:params },
    success: function(resp){
        $('#content').html(resp);
    }
});

为了检查它们：

$("#checkAll").click(function(){
    $(".check").prop('checked', $(this).prop('checked'));
});

我不知道这是否是最好的方法，但这是一个开始。另外，不要忘记保护您的应用。