Getting values from a particular column in an html table

Question

I have a controller setup and the view contains a table with some information. When the submit button is pressed on the jsp page, I would like to get the information from the 2nd column in the table so that I can process that information in the controller. The rows in the table can vary from 2 to 100, so I was looking for something that would get the value from the 2nd column irrespective of the number of rows. I want to extract the information from td class urltext. I did my research but I was not able to find any information related to this so any ideas would be highly appreciated. Thanks.

<table name="urlTable" id="urlList"  style="width:100%; overflow: scroll;">
<tr>
    <th>Select</th>
    <th>URL</th>
</tr>
<c:forEach var="urlList" items="${command.urlList}">
<tr>
    <td><input type="checkbox" name="chk"/></td>
    <td class="urlText"><input class="urlValue" type="text" value="${urlList}" style="font-size: 13px; border: none;" size="85px;" readonly="readonly"/></td>
</tr>
</c:forEach>
</table>                                

Answer 1

Let's start by using thead and tbody elements as we ought.

<table name="urlTable" id="urlList"  style="width:100%; overflow: scroll;">

    <thead>
        <tr>
            <th>Select</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="urlList" items="${command.urlList}">
        <tr>
            <td><input type="checkbox" name="chk"/></td>
            <td class="urlText"><input class="urlValue" type="text" value="${urlList}" style="font-size: 13px; border: none;" size="85px;" readonly="readonly"/></td>
        </tr>
        </c:forEach>
    </tbody>

</table> 

Then just target the second column of each row in the tbody . I assume you're targeting the input .

var inputs = $("#urlList > tbody > tr > td:nth-child(2) > input");

I don't know what you want to do with the input at this point. If you want an Array of the values, do this.

var vals = inputs.map(function() { 
                         return this.value; 
                      }).toArray();

Answer 2

you can try this:

var values = [];
$('#urlList .urlvalue').each(function(){
    var val = $(this).val();
    values.push(val);
});

The array values have all input values from your table.