如何高效批量导入表格数据,无需手动重复编写<tr>标签?
基于用户输入搜索的表格程序与数据导入优化疑问
我常通过编写代码解决生活里的小问题,最近做了一个支持搜索筛选的表格程序,代码如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } </style> </head> <body> <h2>My Tables</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Code</th> <th style="width:40%;">Description</th> </tr> <tr> <td>1</td> <td>Description 1</td> </tr> <tr> <td>2</td> <td>Description 2</td> </tr> <tr> <td>3</td> <td>Description 3</td> </tr> <tr> <td>4</td> <td>Description 4</td> </tr> <tr> <td>5</td> <td>Description 5</td> </tr> <tr> <td>6</td> <td>Description 6</td> </tr> </table> <script> function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[1]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> </body> </html>
现在遇到一个问题:如果要导入上千条数据,总不能手动重复写下面这种代码块吧?
<tr> <td>6</td> <td>Description 6</td> </tr>
我不需要直接的解决方案,希望得到方向指导,想自己摸索学习,但现在搜索方向不对,有点迷茫。
内容的提问来源于stack exchange,提问作者Lefteris Mylonakis
相关产品推荐
相关产品推荐

