Question

我需要搜索所有表格并显示相应的行。当搜索在第一列上时，我无法正确显示搜索结果，该列包含一个行跨度。而不是显示2或3对应的行，而只是显示的第一行

输入搜索

<div>
<input id="searchInput"  type="text" placeholder="Search.."
</div>

一张桌子

<table border="1" id="mytable">
<thead> 
    <tr>
        <th>Item1</th>
        <th>Item2</th>
        <th>Item3</th>
        <th>Item4</th>
        <th>Item5</th>
        <th>Item6</th>
        <th>Item7</th>
        <th>Item8</th>
    </tr>
</thead> 

<tbody id="data">
    <tr>
        <td rowspan='1'>D20180910</td>
        <td>10910</td>
        <td>W1</td>              
        <td><input type="text" value="2018-09-11 07:36:32" id="iddb_164" ></td>
        <td><input type="text" value="2018-09-11 18:47:00" id="iddb_320" ></td>
        <td><input type="text" value="2018-09-11 20:28:54" id="iddb_166" ></td>
        <td><input type="text" value="2018-09-13 11:40:00" id="iddb_318" ></td>
        <td><button type='button' disabled >Delete</button></td>
    </tr>
    <tr>
        <td rowspan='2'>D20180905</td>
        <td>10905</td><td>T2</td>                               
        <td><input type="text" value="2018-09-06 08:14:52" id="iddb_147" ></td>     
        <td><input type="text" value="2018-09-06 12:00:00" id="iddb_324" ></td>
        <td><input type="text" value="2018-09-06 12:42:04" id="iddb_152" ></td>
        <td><input type="text" value="" id="iddb_" ></td>
        <td><button type='button' disabled >Delete</button></td>
    </tr>
    <tr>
        <td>10905</td>
        <td>W1</td>                             
        <td><input type="text" value="2018-09-06 08:14:48" id="iddb_146" ></td>
        <td><input type="text" value="2018-09-06 11:59:00" id="iddb_325" ></td>
        <td><input type="text" value="2018-09-06 12:41:58" id="iddb_150" ></td>
        <td><input type="text" value="2018-09-10 08:21:00" id="iddb_321" ></td>
        <td><button type='button' disabled >Delete</button></td>
    </tr>
    <tr>
        <td rowspan='3'>D20180905</td>
        <td>20105</td><td>T2</td>                               
        <td><input type="text" value="2018-09-06 08:14:52" id="iddb_112" ></td>     
        <td><input type="text" value="2018-09-01 12:12:00" id="iddb_753" ></td>
        <td><input type="text" value="2018-10-06 12:50:04" id="iddb_725" ></td>
        <td><input type="text" value="" id="iddb_" ></td>
        <td><button type='button' disabled >Delete</button></td>
    </tr>
    <tr>
        <td>20105</td>
        <td>w1</td>                             
        <td><input type="text" value="" id="iddb_146" ></td>
        <td><input type="text" value="2018-07-06 10:00:00" id="iddb_412" ></td>
        <td><input type="text" value="2018--07 13:21:58" id="iddb_356" ></td>
        <td><input type="text" value="2018-07-10 09:51:00" id="iddb_741" ></td>
        <td><button type='button' disabled >Delete</button></td>
    </tr>
    <tr>
        <td>20105</td>
        <td>F4</td>                             
        <td><input type="text" value="2018-07-06 10:00:00" id="iddb_174" ></td>
        <td><input type="text" value="" id="iddb_925" ></td>
        <td><input type="text" value="" id="iddb_825" ></td>
        <td><input type="text" value="2018-08-15 09:51:00" id="iddb_124" ></td>
        <td><button type='button' disabled >Delete</button></td>
    </tr>
</tbody>
</table>

JavaScript代码

$(document).ready(function(){
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#mytable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value)     > -1)
    });
  });
});

如何在具有行跨度的表中按过滤器搜索

0 个答案: