Question

我正在学习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>

Answer 1

只需替换以下声明：

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

到

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

动态添加＆amp;删除表格

1 个答案: