Question

我有一张桌子：

<table>
    <tr code="01"> <td><input type="text" name="A"/></td></tr>
    <tr code="02"> <td><input type="text" name="B"/></td></tr>
    <tr code="03"> <td><input type="text" name="C"/></td></tr>
    <tr code="01"> <td><input type="text" name="D"/> </td></tr>
    <tr code="01"> <td><input type="text" name="E"/></td></tr>
</table>

输入E时，我需要用代码=“ 01”过滤tr并获取E的索引（结果为2）

该怎么做？

Answer 1

使用.closest()获取父亲tr
使用.attr()获取code的值
先获取父表，然后再使用attribute equals selector使用具有相同tr的{{1}}元素来获取匹配的行。
使用.index()

示例：

code

$("input[type='text']").change(function() {

  var $parent = $(this).closest("tr");
  var code = $parent.attr("code");
  var $codeRows = $(this).closest("table").find("tr[code='" + code + "']");
  var index = $codeRows.index($parent);

  console.log(index);
});

Answer 2

您可以使用以下代码来检测input tr代码是否在同一棵树中：

function check (val){
var el=$('tr').find("[name="+val+"]").parent().parent();
var code= el.attr("code");
  if(el.is( "[code~="+code+"]")){
    var elements=$('tr').filter(function(){
      return $(this).is( "[code~="+code+"]" );
    });
    console.log(elements.index(el)); 
  }
}


$("input[type='text']").on("input", function() {
  if($(this).val().length > 0){
   check(($(this).val())); 
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr code="01"> <td><input type="text" name="A"/></td></tr>
    <tr code="02"> <td><input type="text" name="B"/></td></tr>
    <tr code="03"> <td><input type="text" name="C"/></td></tr>
    <tr code="01"> <td><input type="text" name="D"/> </td></tr>
    <tr code="01"> <td><input type="text" name="E"/></td></tr>
</table>

说明：

function check (val){
var el=$('tr').find("[name="+val+"]").parent().parent();
var code= el.attr("code");
  if(el.is( "[code~="+code+"]")){
    var elements=$('tr').filter(function(){
      return $(this).is( "[code~="+code+"]" );
    });
    console.log(elements.index(el)); 
  }
}

用于检测输入的值是否在同一code属性树中。如果是这种情况，请过滤该代码中的所有元素并获取索引。

$("input[type='text']").on("input", function() {
   if($(this).val().length > 0){
    check(($(this).val())); 
   }
});

用于检测input textbox上的输入。如果有任何输入，则将触发上面的功能。

jQuery标签具有按属性过滤并获取当前索引

2 个答案: