Html表值不是从Jquery获取的

时间:2016-11-15 16:03:34

标签: javascript jquery html html5

我有一个像下面这样的HTML表格。我将从jquery访问这些值。但是那里有一个问题

我的HTML

                        <table class="table" id="examtbl">
                        <thead>
                            <tr>
                                <th>Ex No</th>
                                <th>Result</th>

                            </tr>
                        </thead>
                        <tbody>
                                <tr id="7500">
                                    <td id="examNo">
                                        <input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7500" />
                                    </td>
                                    <td>
                                        <input class="form-control col-md-3"  type="text" value="76" />
                                    </td>

                                </tr>
                                <tr id="7600">
                                    <td id="examNo">
                                        <input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7600" />
                                    </td>
                                    <td>
                                        <input class="form-control col-md-3"  type="text" value="66" />
                                    </td>

                                </tr>
                        </tbody>

                    </table>

我的剧本

 $("#examtbl > tbody > tr").each(function () {
       $(this).find('td').find("input").each(function () {
            alert($(".examNo").val()); < -- It hits3 times but everytime it shows me 7500 only.
       });  

   });

**你能不能给我一个如何获得这些价值的解决方案。

3 个答案:

答案 0 :(得分:3)

问题是,你总是打电话给$(".examNo") ......这意味着,他总是寻找适合的第一个项目......你必须在内部的每个循环中使用this: )

$("#examtbl > tbody > tr").each(function () {
       $(this).find('td').find("input").each(function () {
            alert($(this).val()); 
       });  
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="examtbl">
    <thead>
        <tr>
            <th>Ex No</th>
            <th>Result</th>
        </tr>
    </thead>
    <tbody>
        <tr id="7500">
            <td id="examNo">
                <input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7500" />
            </td>
            <td>
                <input class="form-control col-md-3"  type="text" value="76" />
            </td>
        </tr>
        <tr id="7600">
            <td id="examNo">
                <input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7600" />
            </td>
            <td>
                <input class="form-control col-md-3"  type="text" value="66" />
            </td>
        </tr>
    </tbody>
</table>

答案 1 :(得分:0)

$("#examtbl > tbody > tr").each(function () {
   $(this).find('td').find("input").each(function () {
        alert($(this).val()); 
   });  
 });

答案 2 :(得分:0)

您可以使用此

JS:

$("#examtbl > tbody > tr").each(function () {
                $(this).find('td > input').each(function () {
                    if ($(this).hasClass('examNo'))
                    alert($(this).val()); //< -- It hits3 times but everytime it shows me 7500 only.
                });  

            });