動態除與去除表

我學習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 –

動態除與去除表

回答

相關問題