Thiết kế website giá rẻ

Question

I have problem with forcing materialize autocomplete to work on dynamic table. It works fine on static element of the table. I am using js document.createElement. Console tells me html looks the same:
console.log(tbody) of dynamic element of table

…but like mentioned before, only static element of table shows autocomplete dropdown:
working static dropdown:

My code:

*****HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta charset="utf-8" />
<?!= include("page-css"); ?>
  <script type="text/javascript" src="autosearch.js"></script>  
  </head>
  <body>

        <footer class="page-footer #2196f3 red"> 
           <div class="container">
              <table>
                 <tr>
                 <h3 style="text-align: center; vertical-align: middle;">Requested projects:</h3>

                 </tr>
              </table>
           </div>
        </footer>
  
  
<br>
<br>


<div class="container-fluid" style="width:100%; font-size:13px;  padding:0px; margin:0px;">
    
      <table border = "1" id="tableData" class = "#eeeeee grey lighten-3" style="width:90%; margin: 0px auto; align: center;">
        <thead>

          <tbody>
          <tr>
WORKING STATIC TEST OF AUTOCOMPLETE:
            <td>
              <th>
                      <div class="input-field">
                        <input type="text" id="autocomplete-input" class="autocomplete">
                        <label for="autocomplete-input"></label>
                      </div>
              </th>
            <td>
          </tr>
          </tbody>

          <tr>
              <th>Code</th>
              <th>name</th>
              <th>Please select project:</th>
          </tr>
        </thead>
        <tbody id="table-body">

        </tbody>
      </table>  
    

<?!= include("page-js"); ?>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

*****JS:

<script>

//EVENTS


  //ON LOAD EVENT
  window.addEventListener('load', () => {
  loadingData();
  }); //mozna tez DOMContentLoaded zamiast load


  //DROPDOWN EVENT
  document.addEventListener('DOMContentLoaded', function() {
  //  document.dispatchEvent(new Event('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems,{
      data:{
        'option 1':null,
        'option 2':null,
        'option 3':null
      }, minLength: 0
    });
  });




//FUNCTIONS

  function loadingData(){
   //just loading rotating thing
  }



  function generateTable(dataArray){
    console.log("generateTable")
    var tbody = document.getElementById("table-body")

    let numb = tbody.childNodes.length;

    for (a = 1; a<numb; a++){
      tbody.removeChild(tbody.firstElementChild);
    }

    dataArray.forEach(function(r){
      var row = document.createElement("tr");

      var col1 = document.createElement("td");
      col1.textContent = r[0];
      row.appendChild(col1);

      var col2 = document.createElement("td");
      col2.textContent = r[1];
      row.appendChild(col2);

      var col3 = document.createElement("td");
      
//not working dynamic autocomplete
      var th = document.createElement("th");
      col3.appendChild(th);
      var div = document.createElement("div");
      div.setAttribute("class", "input-field");
      th.appendChild(div);
      var input = document.createElement("input");
      input.setAttribute("type", "text");
      input.setAttribute("id", "autocomplete-input");
      input.setAttribute("class", "autocomplete");
      div.appendChild(input);
      var label = document.createElement("label");
      label.setAttribute("for", "autocomplete-input");
      input.appendChild(label);

      
      row.appendChild(col3);

      tbody.appendChild(row);

      console.log(tbody)
      const old_tbody = document.getElementById("table-body")


    });   
   
  }

</script>

For sure this is some stupid mistake (propably with event) but I am quite new to web apps and have no clue what am I doing wrong.

I would like dynamic element of table (materialize autocomplete dropdown) to works just like that test static element.

Thiết kế website giá rẻ

Danh mục

Problem with apps script web app + materialize autocomplete on dynamic table