如何通过单击tr获取所选元素值

时间:2014-11-27 11:33:07

标签: javascript jquery html css html5

我正在研究小项目。尝试在单击的表行中获取元素值时遇到了一些问题。这是我的项目代码

<table id="info">
    <% for (int i = 0; i < 15; i++) {%>
    <tr>
        <td>
            <select name="prefix<%=i%>" class="form-control">
                <option>044</option>
                <option>51</option>
                <option>555</option>
                <option>43</option>
                <option>33</option>
                <option>66</option>
            </select>
        </td>
        <td>
            <input name="phone" id="number<%=i%>" type="text" onblur="test2()" class="form-control input"  >
        </td>
        <td>
            <select name='status<%=i%>' class="form-control">
                <option>The number is belong to man</option>
                <option>Out of area</option>
                <option>Dialed already</option>
                <option>The number is not defined</option>
            </select>
        </td>
        <td>
            <textarea id="desc<%=i%>" class="form-control" rows="3"></textarea>
        </td>
    </tr>
    <%}%>
</table>

我的javascript代码如下:

$('#info tbody').on('click', 'tr', function() {
    var $td = $(this).closest('tr').children('td');
    var clId = $td.eq(0).attr('id');
});

1 个答案:

答案 0 :(得分:1)

假设您希望在所点击的行内的所有<select>标记内获取所有<td>标记的选定选项值,则以下脚本将起作用

$('#info tbody').on('click', 'tr', function() {
    $(this).children('td').each(function() {
        $(this).children('select').each(function() {
            alert($(this).val());
        });
    });
});

工作演示:http://jsfiddle.net/rjvurqdz/2/

如果要获取所单击行内所有<td>标记内的所有元素的值,请使用此脚本

$('#info tbody').on('click', 'tr', function() {
    $(this).children('td').each(function() {
        $(this).children().each(function() {
            alert($(this).val());
        });
    });
});

工作演示:http://jsfiddle.net/rjvurqdz/6/