JQuery - 通过 $.each 循环在表中查找文本框值答案

【问题标题】：JQuery - Find textbox values within a table through $.each loopJQuery - 通过 $.each 循环在表中查找文本框值
【发布时间】：2012-03-22 08:59:43
【问题描述】：

我有一个HTML表格...这个HTML表格的第一行是静态的，当他们点击一个（+）按钮时，行将动态添加，用户想要删除一行意味着，他点击一个（- ) 按钮表示当前行被删除。

每行有 4 个文本框。我的 Jquery 代码在下面给出..

var FirstName;
var LastName;
var Email;
var PhoneNumber;
 $("#tableId tr").find('fieldset').each(function (i) { 
                    FirstName =FirstName +','+ $("#txtFirstName" + (i + 1) + "").val();
                    LastName =LastName +','+ $("#txtLastName" + (i + 1) + "").val();
                    Email =Email +','+ $("#txtEmail" + (i + 1) + "").val();
                    PhoneNumber = PhoneNumber+','+ $("#txtPhoneNumber" + (i + 1) + "").val();
                });

我将文本框 id 设置为动态的，它工作正常，但是当用户删除一行时，我无法根据 ID 获取文本框值。

如何获取文本框值？

【问题讨论】：

你在哪里得到任何错误或未定义的地方
No.. 在获取文本框值之前，我使用了类似“ var FirstName = $("#txtFirstName" + (i + 1) + "").val(); if ( FirstName != 'undefined' && FirstName != null && FirstName != NaN) { /// }; 所以我没有收到任何错误或未定义

标签： jquery textbox

【解决方案1】：

我正在使用索引来访问四个文本字段。还添加了 $fieldset 作为上下文。

$("#tableId").find('tr fieldset').each(function (i) { 
    var $fieldset = $(this);
    FirstName =FirstName +','+ $('input:text:eq(0)', $fieldset).val();
    LastName =LastName +','+ $('input:text:eq(1)', $fieldset).val();
    Email =Email +','+ $('input:text:eq(2)', $fieldset).val();
    PhoneNumber = PhoneNumber+','+ $('input:text:eq(3)', $fieldset).val();
});

【讨论】：

嗨 TJ... 是的，我想根据文本框位置获取文本框值，此代码工作正常..@@@ 谢谢

【解决方案2】：

假设您的表格看起来像这样：

<table>
    <tr>
        <td>
            <input type="text" class="firstName" value="foo1">
            <input type="text" class="lastName" value="ba1r">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="firstName" value="foo2">
            <input type="text" class="lastName" value="bar2">
        </td>
    </tr>
</table>

here's a snippet 可能有效（可能需要根据您的需要进行修改）

$(function() {

    //storage        
    var data = {
        firstName : [], lastName : []
    }

    //loop through the tr's
    $('table tr').each(function() {

        //look for the fields firstName and lastName in the tr
        //get their values and push into storage        
        data.firstName.push($('.firstName', this).val());
        data.lastName.push($('.lastName', this).val());
    });

    //view the data in the console
    console.log(data);

    //if you prefer the comma separated data
    var firstName = data.firstName.join(',');
    var lastName = data.lastName.join(',');
});

【讨论】：

【解决方案3】：

尝试使用这样的方法获得价值

  $(this).find("input[id^='txtFirstName']").val()

【讨论】：

嗨夹具，当我使用此代码时，我只得到第一个文本框（txtFirstName）值...@@

【解决方案4】：

循环内的$(this) 将为您提供当前元素的句柄

【讨论】：

【解决方案5】：

对此的理想解决方案是允许您通过 id 获取行，即使删除了一行。通过在每次删除行时更新行的 ID 来做到这一点。

【讨论】：

【解决方案6】：

您可以使用如下选择器：

     $("input[type='input']")

或者将特定的class 应用到您想要的textboxes 并搜索它。

【讨论】：