动态除与去除表

我学习JavaScript和我想创建从数据表中的列表的运行时搜索选项。该表中的数据被加载运行时和我的onkeyup要显示仅符合我条件的行。以下是我的代码片段。我的问题是在显示过程中，所有的数据都显示在第一列中。我如何确保其正确显示。动态除与去除表

<html> 
    <head> 
     <style> 
     .child { 
      border: 1px solid #ff0000; 
     } 

     table,tr,td{ 
      border: 1px solid #ff0000; 
     } 
     </style> 
     <script> 
      var counter =1; 
      var objList =[]; 
      objList[0]={name:"Nabila", jobId:"123456"}; 
      objList[1]={name:"Partha", jobId:"234567"}; 
      objList[2]={name:"Saurabh", jobId:"345678"}; 
      objList[3]={name:"Nabeela", jobId:"456789"}; 

      function loadData() { 
       var objTo = document.getElementById("resultantTable"); 
       for(var i = 0; i < objList.length; i++){ 
        var divtest = document.createElement("tr"); 
        divtest.setAttribute("id", counter); 
        divtest.innerHTML = '<td> ' + counter + ' </td><td>' + 
         objList[i].name + '</td><td>' + objList[i].jobId + '</td>'; 
        objTo.appendChild(divtest); 
        counter++; 
       } 
      } 

      function search(){ 
       var edValue = document.getElementById("itemToSearch"); 
       var text = edValue.value; 
       for(var i=0;i<objList.length;i++){ 
        if((objList[i].name.toUpperCase()).indexOf(text.toUpperCase()) == -1) 
         document.getElementById(i+1).style.display ='none'; 
        else 
         document.getElementById(i+1).style.display ='block'; 
       } 
      } 

     </script> 
    </head> 

    <body onLoad="loadData();"> 
     <div id="list"> 
      <label> Text </label> 
      <input type="text" id="itemToSearch" onKeyup="search(this);"/> 
      <input type="button" value="Add" onclick="addToList();" /> 
     </div> 

     <div id="add"> 
      <div class="divAdd" > 
       <table id="resultantTable" > 
        <tr> 
         <td> SL # </td> 
         <td> Name </td> 
         <td> Job id # </td> 
        </tr> 
        <tbody></tbody> 
       </table> 
      </div> 
     </div>  

    </body> 
</html>

来源

2017-04-24 Saurabh Jhunjhunwala

只需更换下面的语句：

document.getElementById(i+1).style.display ='block';

到

document.getElementById(i+1).style.display="table-row";

来源

2017-04-24 07:19:40

由于一吨的好友，请帮助我了解什么呢表行的意思。 –

您可以点击下面的链接查看详细： https://www.w3schools.com/cssref/pr_class_display.asp –

动态除与去除表

回答

相关问题