Question

您好我试图用javascript为我的表创建一个搜索栏，但有一些问题。问题是当我尝试搜索两行时。例如，如果我只搜索名称作品！但如果我搜索名称和姓氏不起作用。

这是我的js函数

var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function() {
  buscar(this);
}

function buscar(inputbuscar) {
  var valorabuscar = (inputbuscar.value).toLowerCase().trim();
  var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
  for (var i = 0; i < tabla_tr.length; i++) {
    var tr = tabla_tr[i];
    var textotr = (tr.innerText).toLowerCase();
    tr.className = (textotr.indexOf(valorabuscar) >= 0) ? "mostrar" : "ocultar";
  }
}

这是一个可运行的副本：

var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function(){
	buscar(this);
}
function buscar(inputbuscar){
	var valorabuscar = (inputbuscar.value).toLowerCase().trim();
	var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
	for(var i=0; i<tabla_tr.length; i++){
		var tr = tabla_tr[i];
		var textotr = (tr.innerText).toLowerCase();
		tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
	}
}

.mostar{display:block;}
.ocultar{display:none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<linl rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <div class="container-fluid">
<div class="row">
  <div class="col-xs-12">
    <h1 class="page-header">
My Table
    </h1>
    <!-- TABLA INICIA -->
    <table id="tabla" class="table table-striped">
      <thead>
        <tr>
          <th style="width:160px">Nombre</th>
          <th>Apellido</th>
          <th style="width:220px">Profesion</th>
          <th style="width:140px">Sueldo</th>
        </tr>
        <tr>
          <td colspan="4">
            <input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Juan</td>
          <td>Perez Patiño</td>
          <td>Marketing Empresarial</td>
          <td class="text-right">S/. 9000.00</td>
        </tr>
        <tr>
          <td>Alberto</td>
          <td>Gonzales Flores</td>
          <td>Derecho</td>
          <td class="text-right">S/. 4000.00</td>
        </tr>
        <tr>
          <td>Gustavo</td>
          <td>Bueno Bravo</td>
          <td>Derecho</td>
          <td class="text-right">S/. 7000.00</td>
        </tr>
        <tr>
          <td>Enrique</td>
          <td>Pacheco Perez</td>
          <td>Derecho</td>
          <td class="text-right">S/. 12000.00</td>
        </tr>
        <tr>
          <td>Jaime</td>
          <td>Andrade Gonzales</td>
          <td>Economia</td>
          <td class="text-right">S/. 7500.00</td>
        </tr>
        <tr>
          <td>Andrea</td>
          <td>Loayza Perez</td>
          <td>Medicina Humana</td>
          <td class="text-right">S/. 7500.00</td>
        </tr>
        <tr>
          <td>Elvira</td>
          <td>Gonzales Perez</td>
          <td>Ingeniería de Sistema</td>
          <td class="text-right">S/. 7500.00</td>
        </tr>
        <tr>
          <td>Joseph</td>
          <td>Rodriguez Pacheco</td>
          <td>Ingeniería de Software</td>
          <td class="text-right">S/. 8200.00</td>
        </tr>
        <tr>
          <td>Pedro</td>
          <td>kuczynski</td>
          <td>Economista</td>
          <td class="text-right">S/. 250000.00</td>
        </tr>
        <tr>
          <td>Alan</td>
          <td>García Perez</td>
          <td>Derecho</td>
          <td class="text-right">S/. 120000.00</td>
        </tr>
        <tr>
          <td>Jose</td>
          <td>Villanueva Salvador</td>
          <td>Medicina Humana</td>
          <td class="text-right">S/. 2900.00</td>
        </tr>
        <tr>
          <td>Alberto</td>
          <td>Lozano García</td>
          <td>Medicina Humana</td>
          <td class="text-right">S/. 2900.00</td>
        </tr>
      </tbody>
    </table>
    <!-- TABLA FINALIZA -->
    
    
  </div>
</div>
</div>

A demo at jsFiddle可以玩。

Answer 1

为了给你一个启动，我稍微修改了你的功能。这仍然没有按照你想要的方式工作，但它应该引导你一个想法：

function buscar(inputbuscar){
    var valorabuscar = (inputbuscar.value).toLowerCase().trim();

    var arraydevalores = valorabuscar.split(" ");
    console.log(arraydevalores); //CHECK WHAT THIS LOGS

    var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
        console.log(findOne(arraydevalores, tabla_tr));
    for(var i=0; i<tabla_tr.length; i++){
        var tr = tabla_tr[i];
        var textotr = (tr.innerText).toLowerCase();
        tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
    }
}

我将valorabuscar变量拆分为任何空格，所以现在你有一个用户在一个数组中单独搜索的术语数组，如下所示：

["juan", "pérez", "patiño"]

这个数组更易于操作，以便将其与您的表进行比较，并返回与它更相似的内容。祝你好运！

PS：这是一个适当的问题，可以帮助您继续：Check if an array contains any element of another array in JavaScript

如何使用JavaScript

1 个答案: