Question

使用jQuery，我尝试$('th').click(function () {，然后找到＆＃34;＆＃34;下的所有td元素。 th（在同一列中）。

然后根据其中包含的值对input中的每个td元素执行某些操作。

HTML

<table id="tbl_id">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr class="row">
        <td><input class="class_name1" type="text" value="foo" /></td>
        <td><input class="class_name2" type="text" value="bar" /></td>
        <td><input class="class_name3" type="text" value="baz" /></td>
    </tr>
    <tr class="row">
        <td><input class="class_name1" type="text" value="" /></td>
        <td><input class="class_name2" type="text" value="321" /></td>
        <td><input class="class_name3" type="text" value="" /></td>
    </tr>
</table>

点击th元素后，我希望能够在同一列中找到每个td。

不是我所追求的，但我找到了this并且正在玩这个例子，看看我是否可以让它对我起作用。没有运气。

感谢。

修改

这是我第一次尝试时使用的jQuery，但是我想让这个功能适用于所有列，而不仅仅是class="class_name2"的on：

function name () {
    $('.row').each(function () {
        var foo = $(this).find('.class_name2');
        if (foo.val().length !== 0) {
            $(this).toggle();
        }
    }
}

Answer 1

以下是一个例子： http://jsfiddle.net/8jpxwtfn/2

$("th").click(function(){   
    var thIndex = $(this).index()+1;
    $("table td:nth-child("+ thIndex +") input").each(function(){
        if ($(this).val()!=""){
            $(this).css("background-color","red");
        }
    });
});

不确定您想要对输入做什么，因此，在这种情况下，我们会在我们选择的列中输入任何具有值的输入，我们会将颜色设置为红色。

注意：这假设你的桌子没有colspans，rowpans等。

Answer 2

尝试

$("#tbl_id th").on("click", function(e) {
  var i = $(this).index();
  var res = $.map($("#tbl_id .row"), function(el, key) {   
       var elem = $(el).find("td").eq(i).find("input");
       return elem.val().length !== 0 ? elem[0] : null
  });
  
  if (res.length > 1) {
   $(res).parent().toggle()
  }  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl_id">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr class="row">
        <td><input class="class_name1" type="text" value="foo" /></td>
        <td><input class="class_name2" type="text" value="bar" /></td>
        <td><input class="class_name3" type="text" value="baz" /></td>
    </tr>
    <tr class="row">
        <td><input class="class_name1" type="text" value="" /></td>
        <td><input class="class_name2" type="text" value="321" /></td>
        <td><input class="class_name3" type="text" value="" /></td>
    </tr>
</table>

Answer 3

$("th").click(function(){
   var table = $(this).parents("table");
   var index = $(table).find("tr th").index(this)+1;
   var tds = $(table).find(".row td:nth-of-type("+index+")");
});

Answer 4

$("th").click(function(){
    var a = $(this).index();
    $("tr:gt(0)").each(function(){
        var b = $(this).find("td:eq("+a+") input").val();
        alert(b)
    });
});

Answer 5

我认为你想要的是：

$("th").click(function(){
   var $this = $(this);
   var index = $this.index();
   var tdList = $this.closest("table").find("tr").find("td:eq("+index+")>input");
 });

code

单击其元素查找所有td元素

5 个答案: