获取元素的内容包含字符串并选择它

时间:2017-02-24 16:32:01

标签: javascript jquery search

我正在寻找一种通过jquery在表行中搜索字符串的方法,并获取所有内容并选择包含它的元素来获取其他部分! 这是html方面:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Tel</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <?php
                                  $allcontacts=$contact->getallcontacts("name",$_SESSION['username']);
                                  if($allcontacts!=null)



                                  foreach($allcontacts as $value){



                                ?>
      <tr>
        <td class="contact-id">
          <?php echo $value[0]; ?>
        </td>
        <td class="contact-name">
          <?php echo $value[1]; ?>
        </td>
        <td class="contact-tell">
          <?php echo $value[2]; ?>
        </td>
        <td class="contact-info">
          <?php echo $value[3]; ?>
        </td>
        <td class="td-actions">
          <a href="?IDD=<?php echo $value[0]." &owner=".$_SESSION['username'];?>">
            <i class="glyphicon glyphicon-trash"></i>
          </a>

          <a href="#" class="eb" data-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg">
            <i class="glyphicon glyphicon-edit"></i>
          </a>
          <a href="#" onclick="" class="se">
            <i class="glyphicon glyphicon-envelope"></i>
          </a>
        </td>
      </tr>
      <?php } ?>
  </tbody>
</table>
<input type="text" class="cs" /><input type="button" value="Search" class="csb"/>

这是脚本方面!

$(".csb").click(
  function() {
    var ss = $(".cs").val();
    var farray = $("td:contains(ss)").toArray();
    console.log(farray);
  }
);

console给我一个空数组!

2 个答案:

答案 0 :(得分:0)

好吧我已经尝试过你的代码,没有php,所以我把简单的信息。也许这会有所帮助

$(".csb").click(function(){

  var ss = $(".cs").val();
  var farray = new Array(); //define array

  $("tr").removeAttr("style"); //reset all

  if(ss!=""){ //check if isnt empty

    $("td:contains("+ss+")").each(function(){

          $(this).parent().css("background","red"); //select found

          //push to array
          farray.push($(this).parent().find(".contact-id").html());
          farray.push($(this).parent().find(".contact-name").html());
          farray.push($(this).parent().find(".contact-tell").html());
          farray.push($(this).parent().find(".contact-info").html());

    });

  }
  else{ 
    alert("put a text");
  }

  //result
  $("code").html("value search: "+ss);
  $("pre").html("id found: "+farray[0]+"<br>"+
                "name found: "+farray[1]+"<br>"+
                "tel found: "+farray[2]+"<br>"+
                "info found: "+farray[3]);
});

这是完整的代码:https://jsfiddle.net/keejke5e/3/

答案 1 :(得分:0)

您不需要添加.toArray(),因为$(“td:contains(ss)”)返回数组。我想你需要检查一下你是否得到$("td")元素。至于我看到,根据你的代码它应该找到它。因此,只需在Chrome控制台中查看$("td")$("td:contains(ss)")即可。