使用jquery更新数据表中的表行

时间:2011-12-05 18:48:36

标签: javascript jquery ajax checkbox

如何使用jQuery ajax处理checked复选框?然后,我如何将html表格中的每个checked复选框发送到ajax.php

这是我到目前为止所尝试的:

ajax.php

session_start();
if (isset($_POST['id']) && isset($_POST['to']) && isset($_SESSION['user']['id'])) {
    if (is_numeric($_POST['id']) && is_numeric($_POST['to'])) {
        include("mysql_connector.php");
        $user = $_SESSION['user']['id'];
        $sendTo = mysql_real_escape_string(trim($_POST['to']));
        foreach ($_POST['id'] as $id) {
            $id = mysql_real_escape_string(trim($id));
            mysql_query("UPDATE `email` SET status = '$sendTo' WHERE `email_id` = '$id' AND `userid` = '$user'");
        }
    }
}

Javascript:

$(".submit").click(function() {
    var id = $("#id").val();
    var to = $("#bins").val();
    var dataString = 'id=' + id + '&to=' + to;
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: dataString,
    });
});

html:

<form method="POST">
    <table id="inventory" class="table">
        <thead>
            <tr>
                <th style="text-align: center;"><a href="#" name="checkall" id="checkall" onclick="checkAll(this)" class="checkall">Check All</a></th>
                <th>Time Received</th>
                <th>Email</th>
                <th>Subject</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
            <tr class="email">
                <td style="text-align: center;"><input type="checkbox" name='msg[]' class="id" value="2" /></td>
                <td>1231231</td>
                <td>test</td>
                <td>test</td>
                <td>0</td>
            </tr>
            <tr class="email">

                <td style="text-align: center;"><input type="checkbox" name='msg[]' class="id" value="3" /></td>
                <td>1231231</td>
                <td>test</td>
                <td>test</td>
                <td>1</td>
            </tr>
        </tbody>

    </table>
    </br>
    <select name="bins" class="bins">
        <option value="1">Archive</option>
        <option value="2">Read</option>
        <option value="3">Unread</option>
        <option value="4">Save</option>
    </select>
    <input type="submit" name="move" value="Move" class="submit" style="width:auto;"/>
</form>

感谢您的阅读。

1 个答案:

答案 0 :(得分:2)

首先,使用重复ID 的多个dom元素无效。如果这些复选框需要ID,请将它们设为唯一。如果他们不需要ID,那么就完全放弃它们。


要获取所有选中复选框的值列表,请执行以下操作:

var checkedVals = [];
$("input[type='checkbox']:checked").each(function() {
    checkedVals.push($(this).val());
});

或者您可以按名称获取不同的复选框组:

var checkedMsgVals = [];
$("input[name='msg[]']:checked").each(function() {
    checkedMsgVals.push($(this).val());
});

要将这些发送到php,只需在拨打电话时将其包含在数据包中。要做到这一点,你需要发送一个对象,而不是一个查询字符串。

var dataObj = {'id': id, 'to': to, 'checkedValues': checkedMsgVals };

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: dataObj,
});