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.")                    
    });   
});

私が抱えている問題は、serializeArray を実行しようとすると、1 つの長い文字列であり、オブジェクトに保存されないことです。私の目標は、各行をオブジェクトとして取得するか、最も近い tr を読み取ることです。これを送信して db を更新できます。どのように私はそれを行うことができますか？助けてくださいええええ

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 リクエストを 1 つだけ送信する方がよい場合があります。何かのようなもの ：

$('#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 に答える