I try to find small real life problems and attempt to write code to make my life easier, one of them being a search-table simple program that sorts data based on user input. And my question is, is there a more efficient way to import data rather than having to write. like 1000 times? I would appreciate guidance rather than

How do I add multiple tables without writing them 1 by 1

I try to find small real life problems and attempt to write code to make my life easier, one of them being a search-table simple program that sorts data based on user input.

<!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>

JavaScript
​x
 
<!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>
​

And my question is, is there a more efficient way to import data rather than having to write.

<tr>
    <td>6</td>
    <td>Description 6</td>
  </tr>

JavaScript
 
<tr>
    <td>6</td>
    <td>Description 6</td>
  </tr>
​

like 1000 times? I would appreciate guidance rather than someone just solving my issue. My aim is to have fun and learn at the same time. Seems though I’m asking google to wrong questions and going down rabbit holes I’ve no business being in and confusing myself even more.

Thank you for your time reading this and ty in advance on any feedback I may receive 🙂

Answer

var dotimes = 1000

 for(i=0;i<dotimes;i++){
    //time to make a list
            const node = document.createElement("li");
    //add it to the body
                document.getElementById("body").appendChild(node)}

JavaScript
 
var dotimes = 1000
​
 for(i=0;i<dotimes;i++){
    //time to make a list
            const node = document.createElement("li");
    //add it to the body
                document.getElementById("body").appendChild(node)}
​

html

<body id="body">

JavaScript
 
<body id="body">
​

Advertisement

Answer