0

我在表格中有下表

<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。任何想法我该怎么做？帮忙请eeeee

4

1 回答 1

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 */
}
于 2013-10-07T12:38:12.517 回答