Блог

Возникла проблема с небольшим количеством javascript, я не так часто использую javascript.

     <script type="text/javascript"charset="utf-8">
        d3.text("#location#", function(data) {
            var parsedCSV = d3.csv.parseRows(data);

            var container = d3.select("body")
                .append("table",'myTable')

                .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")

                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .text(function(d) { return d; });
        });
    </script>
  

Я хочу добавить таблицу с определенным идентификатором

У меня есть другой javascript, который позволяет мне выполнять поиск в импортированном CSV-файле

 function searchtable() {
  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";
      }
    } 
  }
}
  

Есть ли более простой способ решить эту проблему?

Попробуйте этот код:

 var container = d3.select("body")
                  .append(  d3.creator("table").attr("id", "myTable")  );
  

или

 var container = d3.select("body")
                  .append("table").attr("id","mytable")
  

Не уверен, какого результата вы ожидаете, но вы можете захотеть заглянуть в insertAdjacentHTML.

Пример:

 let csvData = "Hello World!";
let tbl = document.getElementById("myTable");
tbl.insertAdjacentHTML('beforeend',
    '<tr>'  
    '<td>'   csvData   '</td>'   
    '</tr>'
 );