如何在jQuery數組中保存行的每一列的內容

Question

我試圖從表的內容創建一個數組。 表的內容看起來像這樣：

<table>
    <tr  class="rowUpdate">
        <td>Corredor Feed</td>
        <td>Id Corrdor
            <input type="text" value="" class="validate" name="idcorreo">
        </td>
        <td>Nombre
            <input type="text" value="" class="validate" name="nombre">
        </td>
        <td>Email
            <input type="text" value="foo@bar.com" class="validate" name="email">
        </td>
        <td>Empressa
            <input type="text" value="" class="validate" name="Empressa">
        </td>
        <td>Pagina Web
            <input type="text" value="" class="validate" name="paginaWeb">
        </td>
        <td>Telefono
            <input type="text" value="" class="validate" name="telephon">
        </td>
        <td>Cellular
            <input type="text" value="" class="validate" name="cellular" />
        </td>
        <td>

            <input type="submit" id="guardarBtn" value="Save" name="submitme">
        </td>
    </tr>
</table>

我寫的腳本是這樣的

$(document).on('click', '#guardarBtn', function (event) {
   var content=[];
    $('.rowUpdate').each(function (i) {

        $(this).find('td').each(function (j, v) {
            if (j != 0) {

                var input = $("input", this),
                    name = input.attr("name").substring(0, input.attr("name").length),
                    value = input.val();
                alert(value);
                content[name] = value;
                alert(JSON.stringify(content));
            }
        });
        //alert(content);
        rows.push(content);
    });

});

但是當我點擊按鈕獲取表格列的內容並將其保存在數組中時，它顯示為空白

更新的Js小提琴鏈接在這里

提前致謝

Answer 1

檢查一下。 我改變了var content = []; to var content = {};

 $(document).on('click', '#guardarBtn', function (event) { var content= {}; $('.rowUpdate').each(function (i) { $(this).find('td').each(function (j, v) { if (j != 0) { var input = $("input", this), name = input.attr("name").substring(0, input.attr("name").length), value = input.val(); content[name] = value; // alert(JSON.stringify(content)); } }); alert(JSON.stringify(content)); // rows.push(content); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="rowUpdate"> <td>Corredor Feed</td> <td>Id Corrdor <input type="text" value="" class="validate" name="idcorreo"> </td> <td>Nombre <input type="text" value="" class="validate" name="nombre"> </td> <td>Email <input type="text" value="foo@bar.com" class="validate" name="email"> </td> <td>Empressa <input type="text" value="" class="validate" name="Empressa"> </td> <td>Pagina Web <input type="text" value="" class="validate" name="paginaWeb"> </td> <td>Telefono <input type="text" value="" class="validate" name="telephon"> </td> <td>Cellular <input type="text" value="" class="validate" name="cellular" /> </td> <td> <input type="submit" id="guardarBtn" value="Save" name="submitme"> </td> </tr> </table> 

Answer 2

嘗試這個 ：

<form name="form_name" id='form_name'>
    <table>
    <tr class="rowUpdate">
        <td>Corredor Feed</td>
        <td>Id Corrdor
            <input type="text" value="" class="validate" name="idcorreo">
        </td>
        <td>Nombre
            <input type="text" value="" class="validate" name="nombre">
        </td>
        <td>Email
            <input type="text" value="foo@bar.com" class="validate" name="email">
        </td>
        <td>Empressa
            <input type="text" value="" class="validate" name="Empressa">
        </td>
        <td>Pagina Web
            <input type="text" value="" class="validate" name="paginaWeb">
        </td>
        <td>Telefono
            <input type="text" value="" class="validate" name="telephon">
        </td>
        <td>Cellular
            <input type="text" value="" class="validate" name="cellular" />
        </td>
        <td>
            <input type="submit" id="guardarBtn" value="Save" name="submitme">
        </td>
    </tr>
</table>
            </form>

這里：

    $(document).on('click', '#guardarBtn', function (event) {
var row=[];
    $('.rowUpdate').each(function (i) {
        var content=[];
        $(this).find('input').each(function(key,value){
          var field_name=$(this).attr('name');
          var field_value=$(this).val();
            content[field_name]=field_value;
        });
        row.push(content);
    });
    console.log(row);
});

Answer 3

試試這個（保持HTML相同）：

$(document).on('click', '#guardarBtn', function (event) {
    var rows = [];
    $('.rowUpdate').each(function (i) {
        var row = {};
        $(this).find('td').each(function (j, v) {

            if (j != 0) {
                var input = $("input", this),
                    name = input.attr("name").substring(0, input.attr("name").length),
                    value = input.val();
                row[name] = value;
            }
            rows.push(row);
        });
    });

Answer 4

如果我很好理解這個問題，你只需要這樣的東西（我不確定為什么你使用嵌套的each循環 - 這有什么原因嗎？你在這些循環之間有更多的代碼嗎？）

 $(document).on('click', '#guardarBtn', function(e){ var content={}; $('.rowUpdate td').find('input').each(function(){ content[this.name] = this.value; }); alert(JSON.stringify(content)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="rowUpdate"> <td>Corredor Feed</td> <td>Id Corrdor <input type="text" value="" class="validate" name="idcorreo"> </td> <td>Nombre <input type="text" value="" class="validate" name="nombre"> </td> <td>Email <input type="text" value="foo@bar.com" class="validate" name="email"> </td> <td>Empressa <input type="text" value="" class="validate" name="Empressa"> </td> <td>Pagina Web <input type="text" value="" class="validate" name="paginaWeb"> </td> <td>Telefono <input type="text" value="" class="validate" name="telephon"> </td> <td>Cellular <input type="text" value="" class="validate" name="cellular" /> </td> <td> <input type="submit" id="guardarBtn" value="Save" name="submitme"> </td> </tr> </table> 

Answer 5

更短的訪問方式：

 $(document).on('click', '#guardarBtn', function (event) { var content = {}; $('.rowUpdate').each(function (i) { $(this).find('input[type=text]').each(function(){ content[$(this).attr("name")] = $(this).val(); }); }); alert(JSON.stringify(content)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="rowUpdate"> <td>Corredor Feed</td> <td>Id Corrdor <input type="text" value="" class="validate" name="idcorreo"> </td> <td>Nombre <input type="text" value="" class="validate" name="nombre"> </td> <td>Email <input type="text" value="foo@bar.com" class="validate" name="email"> </td> <td>Empressa <input type="text" value="" class="validate" name="Empressa"> </td> <td>Pagina Web <input type="text" value="" class="validate" name="paginaWeb"> </td> <td>Telefono <input type="text" value="" class="validate" name="telephon"> </td> <td>Cellular <input type="text" value="" class="validate" name="cellular" /> </td> <td> <input type="submit" id="guardarBtn" value="Save" name="submitme"> </td> </tr> </table>