javascript - How to get the values from all input elements inside a <tr> element using JQuery - Stack Overflow

admin管理员组

文章数量:1279048

How do I get all the input elements in one row in my form? For example, in the code snippet below, I have a checkbox and a text input box. I want to get the values of both these input types and display them to the user in the next td element containing the div id="hist" element.

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

Also I have a 5 radio buttons and a text input box attached to it. These are all not on the same row but I want to get the value of the "pain1" element and the "cerCommentH" element and display it. Please note that the below is just a code snippet. I have several such elements in my form so I can't work with them individually using their "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>

Thanks in advance for your help.

How do I get all the input elements in one row in my form? For example, in the code snippet below, I have a checkbox and a text input box. I want to get the values of both these input types and display them to the user in the next td element containing the div id="hist" element.

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

Also I have a 5 radio buttons and a text input box attached to it. These are all not on the same row but I want to get the value of the "pain1" element and the "cerCommentH" element and display it. Please note that the below is just a code snippet. I have several such elements in my form so I can't work with them individually using their "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>

Thanks in advance for your help.

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 12, 2012 at 14:30 SapphireSapphire 1,16988 gold badges2020 silver badges3535 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Assuming perhaps you want to do something with each one:

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

If you need it serialize() way then:

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

//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');

You can serialize it into an array that can then be directly input into a jquery ajax method as data using serializeArray.

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

本文标签： javascriptHow to get the values from all input elements inside a lttrgt element using JQueryStack Overflow