如何在jQuery数组中保存行的每一列的内容

How to save the content of each column of a row in a jQuery array

本文关键字：一列 jQuery 数组 保存      更新时间：2024-01-31

我正试图从表的内容创建一个数组。表格的内容看起来像这样：

<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 Fiddle链接是此处

提前感谢

检查这个。我更改了var content=[]；到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>

试试这个（保持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);
        });
    });

较短的访问方式：

$(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>

试试这个：

<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>

js此处：

    $(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);
});

如果我很理解这个问题，你只需要这样的东西（但我不确定你为什么使用嵌套的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>

相关文章：