Question

我在表格中有下表

<form>
    <table id="Table1" class="appendGrid ui-widget">
        <thead class="ui-widget-header">
            <tr>
                <td class="ui-widget-header" style="width: 32px;"></td>
                <td class="ui-widget-header">SupCo</td>
                <td class="ui-widget-header">Number</td>
            </tr>
        </thead>
        <tbody class="ui-widget-content">
            <tr id="tblAppendGrid_Row_1">
                <td class="ui-widget-content first">1</td>
                <td class="ui-widget-content">
                    <input type="text" id="tblAppendGrid_SupCo_1" name="SupCo" maxlength="100" style="width: 160px;"></td>
                <td class="ui-widget-content">
                    <input type="text" id="tblAppendGrid_Number_1" name="Number" maxlength="4" style="width: 40px;"></td>
            </tr>
            <tr id="tblAppendGrid_Row_2">
                <td class="ui-widget-content first">2</td>
                <td class="ui-widget-content">
                    <input type="text" id="tblAppendGrid_SupCo_2" name="SupCo" maxlength="100" style="width: 160px;"></td>
                <td class="ui-widget-content">
                    <input type="text" id="tblAppendGrid_Number_2" name="Number" maxlength="4" style="width: 40px;"></td>
            </tr>
            <tr id="tblAppendGrid_Row_3">
                <td class="ui-widget-content first">3</td>
                <td class="ui-widget-content">
                    <input type="text" id="tblAppendGrid_SupCo_3" name="SupCo" maxlength="100" style="width: 160px;"></td>
                <td class="ui-widget-content">
                    <input type="text" id="tblAppendGrid_Number_3" name="Number" maxlength="4" style="width: 40px;"></td>
            </tr>
                   <button  role="button" class="ui-button" id="btnSave" type="button"></button>
        </tbody>
    </table>
</form>

我正在尝试读取每一行（tr）并使用ajax函数提交它。

$('#btnSave').button().click(function () {
    var rowData = $(document.forms[0]).serializeArray();
    $.each(rowData, function (i, field) {
        var oData = {
            "SupCo": field.SupCo.value,
            "Number": field.Number.value        
        };                               
    $.ajax({
       type: 'post',
       url: "./api/updateDb?Id=" + Id +"&",
       data: oData,
       Sucess: alert("Record UdpateSucessfully.")                    
    });   
});

我遇到的问题是，当我尝试serlializeArray时，它只是一个长字符串而不保存在对象中。我的目标是将每一行作为一个对象或读取最近的tr，所以我可以提交它来更新db。我有什么想法可以做到这一点？帮助pleaseeeeee

Answer 1

你应该试试这个（假设你想要的id在第一列）：

$('#btnSave').button().click(function () {
    var rows = $('form tbody>tr');
    $.each(rows, function () {
        var oData = {
            "SupCo": $(this).find('input[name="SupCo"]').val(),
            "Number": $(this).find('input[name="Number"]').val()       
        };                               
        $.ajax({
            type: 'post',
            url: "./api/updateDb?Id=" + $(this).find('td.first').text() +"&",
            data: oData,
            success: alert("Record UdpateSucessfully.")                    
        });   
    });
});

但也许更好（根据您的需要）只发送一个单独的ajax请求，其中包含所有行的全部数据，而不是多个（逐行）。类似的东西：

$('#btnSave').button().click(function () {
    var oData = {
        'rows': []
    };
    var rows = $('form tbody>tr');
    $.each(rows, function () {
        oData.rows.push({
            "Id": $(this).find('td.first').text(),
            "SupCo": $(this).find('input[name="SupCo"]').val(),
            "Number": $(this).find('input[name="Number"]').val()       
        });
    });
    $.ajax({
        type: 'post',
        url: "./api/updateDb",
        data: oData,
        success: alert("Record UdpateSucessfully.")                    
    }); 
});

在服务器端脚本中创建一个循环：

foreach ($_POST['rows'] as $row) {
    $id = $row['Id'];
    $supCo = $row['SupCo'];
    $number = $row['Number'];
    /* your script */
}

在使用jQuery发送之前读取每一行

1 个答案: