如何使用 JQuery 从 <tr> 元素内的所有输入元素中获取值答案

【问题标题】：How to get the values from all input elements inside a <tr> element using JQuery如何使用 JQuery 从 <tr> 元素内的所有输入元素中获取值
【发布时间】：2012-06-12 14:30:39
【问题描述】：

如何在表单的一行中获取所有输入元素？例如，在下面的代码 sn-p 中，我有一个复选框和一个文本输入框。我想获取这两种输入类型的值，并在包含 div id="hist" 元素的下一个 td 元素中将它们显示给用户。

   <tr><td>Head</td>
            <td><input type="text" name="headH" id="headH" ></td>
            <td><input class="NA" type="checkbox" name="headNA" id="headNA" value="N/A"></td>
            <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("Head","H",num) %>
            </td></tr>
        <tr><td>Neck</td>
            <td><input type="text" name="neckH" id="neckH" ></td>
            <td><input class="NA" type="checkbox" name="neckNA" id="neckNA" value="N/A"></td>
            <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("Neck","H",num) %></td>
        </tr>
        <tr><td>UE</td>
            <td><input type="text"name="uEH" id="uEH"></td>
            <td><input class="NA" type="checkbox" name="ueNA" id="ueNA" value="N/A"></td>
            <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("UExt","H",num) %></td>

我还有一个 5 个单选按钮和一个附加的文本输入框。这些都不在同一行，但我想获取“pain1”元素和“cerCommentH”元素的值并显示它。请注意，下面只是一个代码 sn-p。我的表单中有几个这样的元素，所以我不能使用它们的“id”单独处理它们。

   <tr>
            <td>Mech</td>
            <td>
                <input type="radio" name="pain1" value="Pain a">Pain a
                <input type="radio" name="pain1" value="Pain b">Pain b

            </td></tr>  
            <tr><td></td>
            <td>
                <input type="radio" name="pain1" value="Pain c">Pain c  
                <input type="radio" name="pain1" value="Pain d">Pain d
                <input type="radio" name="pain1" style="display:none;" value="">
                <input type="button" value="Clear" onclick="document.history.pain1l[4].checked = true;">
        </td>
        <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("Cehi","H",num) %></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="radio" name="pain1" value="Other">Other
                <input type="text" name="cerCommentH" id="cerCommentH">
            </td>
            <td></td>
            <td></td>
        </tr>

提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

假设你想对每个人做点什么：

$('tr:has(input)').each(function() {
   var row = this;
   var values = "";
   $('input', this).each(function() {
      values =  values + "," + $(this).val() 
   });
   values = "<div>(" + values.substring(1) + ")</div>";

   $('.hist', row).html(values); 
});

【讨论】：

values 将是一个不可读的字符串？ :) 和价值 += $(this).val();更短
你是对的，但是我不知道他想对这些值做什么，所以我会把它留给 OP。我确实意识到+= 很短，但是为了便于阅读，我已经做了很长的路要走。
@lucuma 我想用输入字段中的值形成一个<div> 并将其显示给用户。所以像（N/A-headcomment，Date）。但是，此代码将“undefined-13-Jun-2012”插入所有<div>s，而不仅仅是输入字段的对应项。
这是我尝试过的，对您的代码稍作改动$('tr').each(function() { var row = this; var values; $('input[type=text],textarea,input[type=radio]:checked,input[type=checkbox]:checked', this).each(function() { if ($(this).val()!=null && $(this).val()!="") values += $(this).val(); }); $('.hist', row).text(values+"-"+"<%=date%>"); });`

【解决方案2】：

如果你需要它 serialize() 方式，那么：

var result = '';
$('tr input').each(function(){
    result += $(this).attr('name')+'='+$(this).val()+'&'
})
//post result after all

【讨论】：

【解决方案3】：

//suppose trid is the id of the tr element
var all = $('#tr input');
//or if tr has no id, but table does have a id 'table1'
var tr = $('input', '#table1 tr:first');

【讨论】：

【解决方案4】：

您可以将其序列化为一个数组，然后可以使用 serializeArray 将其作为数据直接输入到 jquery ajax 方法中。

var rowIndex = 1; // row index to pull
// select all inputs that you desire to send, then use serializeArray();
var data = $("tr").eq(rowIndex).find("input").serializeArray();
$.post(url,data,onDoneHandler);

【讨论】：