javascript - 在单独的框中显示 html 表格内容-6ren

javascript - 在单独的框中显示 html 表格内容

转载作者：行者123 更新时间：2023-11-27 23:43:39

25

4

我有一个带有 html 表格的简单 html 页面。我已经编写了代码以表格格式显示实时搜索结果。我只是想知道是否可以在单独的框中显示表格数据？喜欢表格？我的 html 表中有 11 列，其中很少有很长的数据，因此文本换行看起来很难看。

请指导我如何过滤数据并将其显示在可滚动框中而不是普通表格中。

这是我的代码。

  function myFunction1() {
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput1");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
    	 }
        }       
      }
    }
    
    
 
 function myFunction2() {
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput2");
      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) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
    	 }
        }       
      }
    }

* {
      box-sizing: border-box;
    }
    
    #myTable tbody {
        height: 600px;
        display: inline-block;
        width: 100%;
        overflow: auto;
    	
    }
    	
    #myInput1 {
      background-image: url("res/searchicon.png");
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 26%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    #myInput2 {
      background-image: url("res/searchicon.png");
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 26%;
      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: 15px arial, sans-serif;	
    }
    
    tr:nth-child(even) {
        background-color: #eff1f4;
    }
    #myTable th, #myTable td {
      table-layout: fixed;
      text-align: left;
      padding: 10px;
      width: 100%;
    }
    
    #myTable tr {
      border-bottom: 1px solid #ddd;
    }
    
    #myTable tr.header, #myTable tr:hover {
      background-color: #DEC4BC;
    }
    
    
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

<!DOCTYPE html>
    <html>
    <head>
 
    </head>
    <body>
    <img src="res/eGo.png" style="width:250px;height:150px;">
    
    <h2><font face="Arial" color="#c11919">eGO Web</font></h2>
    
    <input type="text" id="myInput1" onkeyup="myFunction1()" placeholder="Search for customer names" title="Type in a customer name">
    <input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Customer Number" title="Type in a Customer Number">
    <br>
    <font size="2"face="Arial" color="#c11919">last updated on - July 2019</font>
    <br>
    <br>
    
    <table id="myTable" style="display:visible;">
      <tr class="header">
    
        <th style="width:10%; ">Customer Name</th>
    	<th style="width:10%;">Account Number</th>
    	<th style="width:10%;">Collector Name</th>
    	<th style="width:10%;">Statement Email</th>
    	<th style="width:10%;">Customer Contacts</th>
    	<th style="width:10%;">Internal Contacts</th>
    	<th style="width:10%;">3rd Party Payments</th>
    	<th style="width:10%;">Remarks/ Customer Profile</th>
    	<th style="width:10%;">Historical Activities</th>
    	<th style="width:10%;">Portal/ Invoicing Method</th>
    	<th style="width:10%;">Statement Required</th>
      </tr>
    
    <--! Here is table data -->
    
    </table>
    <br>
    <font size="1"face="Arial" color="#c11919">To report issues <a href="mailto:pratik.kumar@company.com?Subject=Issue%20in%20Collector%20lookup%20tool%20" target="_top">Click Here</a> or send email to pratik.kumar@company.com</font>
   
    
    </body>
    </html>

最佳答案

写为答案，因为还不允许发表评论。您可以设置以下样式:

    tr,td {
         overflow: auto;
}

This will allow scrolling in cells of table when texts overflow or are more than specified size of boxes.

更多关于溢出的信息:https://www.w3schools.com/cssref/pr_pos_overflow.asp

关于javascript - 在单独的框中显示 html 表格内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56912645/

25

4

0

文章推荐： javascript - 从一段文本中找出javascript中的关键字

文章推荐： c++ - 了解位运算及其效果

java - 如何反转字符串中的每个单词(单独)？
Java 专家需要您的帮助。今天我在一次采访中被问到这个问题，但我无法解决。所以我需要一个解决方案来解决这个问题；反转字符串 Input : Hello, World! Output : oll
javascript - 将项目添加到数组中 - 单独
目标:单击按钮并将成分作为单独的项目添加到数组中。当前设置: 这给出:蓝莓芒果柠檬汁然后我希望能够通过单击按钮将成分作为单独的项目添加到数组中: var allI
javascript - 正则表达式匹配双引号内的单引号(单独)？
如何编写正则表达式来匹配它(参见箭头): "this is a ->'' this is a "test' there is another "test' 第二种情况 /\b'/ Regex Demo
javascript - 从数组中删除所有项目(单独)
我有一个数组，其中包含有限数量的项目。我想随机删除项目，直到所有项目都被使用过一次。示例 [1,2,3,4,5] 使用了随机数 5，所以我不想再这样了。使用了随机数 2，所以我不想再这样了。等等..
android - 单独/小组开发人员如何在多个设备上进行测试？
首先，抱歉，如果这太主观了，我只是不知道还能怎么问/去哪里问。无论如何，鉴于我最近的所有问题，我准备很快发布一个 Android 应用程序，并且大部分测试都是在我的手机 Droid 上完成的。我真的
delphi - 单独 .pas 文件中的字符串
这可能不是这个问题的正确位置，如果不合适请随意移动它。我标记为 Delphi/Pascal 因为这是我在 atm 中工作的内容，但这可能适用于我猜的所有编程。无论如何，我正在做一些代码清理，并考虑将
javascript - 单独(组织)快速路线
我像这样分隔了其余 api 的路由。有没有更好的方法来组织路由器？还是我现在的做法没问题？ app.js app.use('/api/auth',auth); 应用程序/ Controller /au
excel - 单独 Excel 工作表中特定数据的总和
我在 2 个单独的工作表中包含以下数据: 表1: A B C D a ff dd ff ee b 12 10 10 12 表2: A B C
jquery - 单独 HTML 文件中的可单击行可在新选项卡中打开不同的链接
我正在使用 jQuery，并在位于单独 HTML 文件中的表中获取了几行。单击时，每一行都会成功重定向到本地 HTML 文件。 (使用window.location) 我想要实现的目标我想要完成的是
html - 单独
的重叠背景图像会产生比它们本身更暗的阴影
我有重叠背景图像的问题，当它们重叠时会导致阴影比不重叠时更暗，从而产生不均匀的阴影。我有一个高度灵活的盒子，带有一些透明的背景图像和阴影以创建漂亮的边框。盒子本质上是 3 个元素。您可以在此处找到
c# - 单独 git 存储库中的服务结构项目
按照正常的微服务框架，我们希望将每个微服务放入其自己的 git 存储库中，然后为 Service Fabric 项目创建一个存储库。当我们更新其中一个微服务时，Service Fabric 项目将仅重
html - 单独 html 的多个包含
我想将多个片段嵌入到一个指令中。这是我的设置方式。 Everyone Development (3)
linux - 单独 Gzip 多个文件并保留原始文件
我希望在保留原件的同时将多个文件 gzip 到一个目录中(到多个 .gz 文件中)。我可以使用这些命令来处理单个文件: find . -type f -name "*cache.html" -exe
performance - 我如何知道 Eclipse 插件使用了多少内存(单独)
有没有办法分别知道每个 Eclipse 插件消耗了多少内存？最佳答案进行堆转储并使用例如分析它Eclipse Memory Analyser . 如需更多信息，请参阅 Analyzing Equi
gradle - Gradle-单独(其他)git存储库中DSL的通用部分
我们使用cusrom插件并以这种方式定义脚本(这是一个近似的伪代码): //It is common part for every script (1) environments { "env1"
单独 Dll 中的 Signalr Hub
我在控制台应用程序中托管了一个集线器，并有一个 WPF 应用程序连接到它。它工作得很好。然后我将集线器移到一个单独的项目中，并将主机的引用添加到新项目中。现在我收到 500 错误，没有其他详细信息。
单独 JAR 文件中的 JavaBeans 类
是否可以在单独的 JAR 文件中为 JavaBean 构建类？具体来说，JavaBean 在一个 JAR 文件中具有 Bean 和 BeanInfo 类，而自定义属性编辑器类位于另一个 JAR 文件中
C#、MAF、单独 AppDomain 中的未处理异常管理
好的，所以我有一个 MAF 应用程序，它在单独的应用程序域中加载每个插件。这非常适合我的需要，因为它允许我在运行时动态卸载和重新加载我的插件。问题是，我需要能够在子应用域中处理未处理的异常，捕获它，
mysql - SQL - 在另一个表上查找至少两个不同/单独/不同的值
在参加在线数据库类(class)(针对初学者)时，我注意到一个问题，我必须查找涉及...至少两个不同值的查询...例如， ELMASRI 书中的 COMPANY 数据库指出:查找至少从事两个不同项目的
css - 单独 div 中两行图像之间的空间，仅出现在一个特定行上
(首先:我已经尝试了涉及边距、边框等的所有选项。) Link to problematic page. Link to similarly constructed, non-problematic p

首页

博学

6Ren·AI

商城

javascript - 在单独的框中显示 html 表格内容