JQuery:遍历表行

时间:2015-08-11 06:13:19

标签: jquery html

我想逐个遍历所有行,通过这些行我可以逐个获取特定的列值。触发点击行。我想做这样的事情。提前谢谢。

  var t=0;
  $(document).delegate('tr', "click", function (e) {
        $(this).children().each(function () {   
           // alert("child" + $(this).text());
            alert("latvalue" + $('tr td.val1')[t].text());
           alert("latvalue" + $('tr td.val2')[t].text());
t++;
        })

表:

 <tr ><td id="1">item.Date</td><td class="val1">value</td><td  class="val2">value</td><td  class="val3">value</td></tr>

2 个答案:

答案 0 :(得分:0)

如果您想提醒点击的行中val2$(document).delegate('tr', "click", function(e) { alert("latvalue: " + $('td.val1 ', this).text()); alert("latvalue: " + $('td.val2 ', this).text()); })元素的值,那么

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td class="val1">1.1</td>
    <td class="val2">1.2</td>
  </tr>
  <tr>
    <td>2</td>
    <td class="val1">2.1</td>
    <td class="val2">2.2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class="val1">3.1</td>
    <td class="val2">3.2</td>
  </tr>
</table>
&#13;
$(document).delegate('tr', "click", function (e) {
        $(this).closest('table').find('tr').each(function () {  
            alert('latValue' + $(this).find('.val1').text());
            alert('latValue' + $(this).find('.val2').text());
            alert('latValue' + $(this).find('.val3').text());
        });
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这会迭代表的所有行

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-3 bhoechie-tab-menu">
                   <div class="list-group">
                     <a href="#" class="list-group-item active text-center" title="Open Order">
                       <h4 class="glyphicon glyphicon-user"></h4><br/>Open Order
                     </a>
                     <a href="#" class="list-group-item text-center" title="Today Order">
                       <h4 class="glyphicon glyphicon-lock"></h4><br/>Today Order
                     </a>
                     <a href="#" class="list-group-item text-center" title="Future Account">
                       <h4 class="glyphicon glyphicon-info-sign"></h4><br/>Future Order
                     </a>
                       <a href="#" class="list-group-item text-center" title="Past Order">
                       <h4 class="glyphicon glyphicon-check"></h4><br/>Past Order
                     </a>
                   </div>
            </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-9 bhoechie-tab">
                <!-- flight section -->
                <div class="bhoechie-tab-content active">
                    <h3>Open Order</h3>
</div>
</div>
<script>
        $(document).ready(function() {
        $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
            e.preventDefault();
            $(this).siblings('a.active').removeClass("active");
            $(this).addClass("active");
            var index = $(this).index();
            $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
            $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
        });
    });
</script>