Question

我正在研究html中的搜索机制，当我第一次搜索数据时，它正在工作。如果我搜索下一个数据，它将不会按预期搜索。如果我搜索空数据，它将不会显示实际表格（在初始时间显示）。

Even any better pointer is also welcome, if my below code is not good.

我的代码：

<!DOCTYPE>
<html>
<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <style> td{border: thin solid;} </style>

    <script type="text/javascript">

    function searchTable(inputVal) { 
        var inputVal = document.getElementById('searchdata').value;
            $('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
            $("tr").css('display', 'none');
            $(".showthis").parent().parent().css('display', '');
        }

    function addList(){

        var table = "";
        table += "<table class='table'>";
        table += "<tr>";
        table += "<td>S.no</td>";
        table += "<td>Name</td>";
        table += "<td>Gender</td>";

        table += "</tr>";
        for(i=0; i<10; i++) {
            table += "<tr>";
            table += "<td>"+i+"</td>";
            table += "<td>Name"+i+"</td>";
            table += "<td>"+( i > 5 ? "Male" : "Female")+"</td>";
            table += "</tr>";
        }
        table += "</table>";
        var body = document.getElementById("ListContainer");
        body.innerHTML = table;
    }
    </script>

</head>
<body onload="addList();">
    <input id="Button1" type="button" value="button" onclick="searchTable();" />
        <input id="searchdata" type="text" />
        <div id="ListContainer" > </div>
</body>
</html>

预感谢...

Answer 1

也许像this。

function searchTable(inputVal) {
    var inputVal = document.getElementById('searchdata').value;
    if (inputVal == "") {
        $('.hideThis').removeClass('hideThis');
    } else {
        $('tr').addClass('hideThis');
        $('tr:has(td:contains(' + inputVal + '))').removeClass('hideThis');
    }
}

Answer 2

按如下方式修改搜索功能：

function searchTable(inputVal) { 
    var inputVal = document.getElementById('searchdata').value;
   if(inputVal){ //check for valid searches
        //addList();
        $('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
        $("tr").css('display', 'none');
        $(".showthis").parent().parent().css('display', '');
  }
  else{
    addList(); // if you don't want to reinitialize table on empty searches skip this
  }
}

搜索机制在Html表中不起作用

2 个答案: