使用javascript制作搜索框并合并CSV * { 框大小：边框框； } #我的输入{ 背景图片：url（'/css/searchicon.png'）；背景位置：10px 10px；背景重复：无重复；宽度：100%；字体大小：16px；填充：12px 20px 12px 40px；边框：1px实心#ddd；边缘底部：12px； } #我的桌子{ 边界塌陷：塌陷；宽度：100%；边框：1px实心#ddd；字号：18px； } #我的表th，#我的表td{ 文本对齐：左对齐；填充：12px； } #myTable tr{ 边框底部：1px实心#ddd； } #myTable tr.header，#myTable tr:悬停{ 背景色：#f1f1； } 我的顾客名称国家阿尔弗雷德·福特基斯特德国伯格伦兹蛇瑞典岛屿贸易英国科尼格利希·埃森德国笑巴克斯酒窖加拿大马加兹尼营养不良意大利北/南英国巴黎特色酒店法国函数myFunction（）{ var输入、过滤器、表格、tr、td、i、TXT值；输入=document.getElementById（“myInput”）； filter=input.value.toUpperCase（）； table=document.getElementById（“myTable”）； tr=table.getElementsByTagName（“tr”）；对于（i=0；i-1）{ tr[i].style.display=“”； }否则{ tr[i].style.display=“无”； } } } }_Javascript_Html_D3.js

使用javascript制作搜索框并合并CSV * { 框大小：边框框； } #我的输入{ 背景图片：url（'/css/searchicon.png'）；背景位置：10px 10px；背景重复：无重复；宽度：100%；字体大小：16px；填充：12px 20px 12px 40px；边框：1px实心#ddd；边缘底部：12px； } #我的桌子{ 边界塌陷：塌陷；宽度：100%；边框：1px实心#ddd；字号：18px； } #我的表th，#我的表td{ 文本对齐：左对齐；填充：12px； } #myTable tr{ 边框底部：1px实心#ddd； } #myTable tr.header，#myTable tr:悬停{ 背景色：#f1f1； } 我的顾客名称国家阿尔弗雷德·福特基斯特德国伯格伦兹蛇瑞典岛屿贸易英国科尼格利希·埃森德国笑巴克斯酒窖加拿大马加兹尼营养不良意大利北/南英国巴黎特色酒店法国函数myFunction（）{ var输入、过滤器、表格、tr、td、i、TXT值；输入=document.getElementById（“myInput”）； filter=input.value.toUpperCase（）； table=document.getElementById（“myTable”）； tr=table.getElementsByTagName（“tr”）；对于（i=0；i-1）{ tr[i].style.display=“”； }否则{ tr[i].style.display=“无”； } } } }

javascript html d3.js

使用javascript制作搜索框并合并CSV * { 框大小：边框框； } #我的输入{ 背景图片：url（'/css/searchicon.png'）；背景位置：10px 10px；背景重复：无重复；宽度：100%；字体大小：16px；填充：12px 20px 12px 40px；边框：1px实心#ddd；边缘底部：12px； } #我的桌子{ 边界塌陷：塌陷；宽度：100%；边框：1px实心#ddd；字号：18px； } #我的表th，#我的表td{ 文本对齐：左对齐；填充：12px； } #myTable tr{ 边框底部：1px实心#ddd； } #myTable tr.header，#myTable tr:悬停{ 背景色：#f1f1； } 我的顾客名称国家阿尔弗雷德·福特基斯特德国伯格伦兹蛇瑞典岛屿贸易英国科尼格利希·埃森德国笑巴克斯酒窖加拿大马加兹尼营养不良意大利北/南英国巴黎特色酒店法国函数myFunction（）{ var输入、过滤器、表格、tr、td、i、TXT值；输入=document.getElementById（“myInput”）； filter=input.value.toUpperCase（）； table=document.getElementById（“myTable”）； tr=table.getElementsByTagName（“tr”）；对于（i=0；i-1）{ tr[i].style.display=“”； }否则{ tr[i].style.display=“无”； } } } },javascript,html,d3.js,Javascript,Html,D3.js,我正在尝试做一个过滤器，我可以从csv文件中搜索词。我真的很喜欢这个例子，但我不知道如何将csv文件合并到其中，而不是硬编码我试图使用这个函数 d3.csv（“dataset.csv”），函数（数据）{ 非常想了解这是如何工作的，以及如何将csv文件合并到其中。 * { 框大小：边框框； } #我的输入{ 背景图片：url（'/css/searchicon.png'）；背景位置：10px 10px；背景重复：无重复；宽度：100%；字体大小：16px；填充：12px 20px 12

我正在尝试做一个过滤器，我可以从csv文件中搜索词。我真的很喜欢这个例子，但我不知道如何将csv文件合并到其中，而不是硬编码

我试图使用这个函数 d3.csv（“dataset.csv”），函数（数据）{

非常想了解这是如何工作的，以及如何将csv文件合并到其中。


* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#MYTH表，
#myTable td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，
#myTable tr：悬停{
背景色：#f1f1；
}
我的顾客

名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国
函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}
函数上传（）{
var fileUpload=document.getElementById（“fileUpload”）；
var regex=/^（[a-zA-Z0-9\s\\\.\-：]）+（.csv|.txt）$/；
if（regex.test（fileUpload.value.toLowerCase（））{
if（typeof（FileReader）！=“未定义”）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var table=document.createElement（“表”）；
var rows=e.target.result.split（“\n”）；
对于（变量i=0；i1）{
var行=table.insertRow（-1）；
对于（var j=0；j

您可以使用该插件。它支持导入/导出CSV文件，并提供可搜索和可排序的表格



这很好，但并不完全符合我的需要。我希望能够读取csv文件
    <!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 Customers</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%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</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")[0];
    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>