Why does my cloning JS code is messing up whole HTML table?-CodePudding

I just wanted to add button that will make a new table under the first one (max. 10 times), but the JavaScript code that I implemented don't do that as I want. Below is my HTML & JSS.

    function addField(n)
{
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
}

<table id="tbl" class="table-bordered table-dark">
  <thead>
    <tr>
      <th scope="colgroup">Godzina rozpoczęcia</th>
      <th scope="colgroup">Godzina zakończenia</th>
    </tr>
  </thead>
  <tbody>
    <td style="vertical-align: top;">
      <label for="start-date">Data:</label>
      <input type="date" id="start" name="data-roz"> <br>
      <label for="start-time">Godzina:</label>
      <input type="time" id="godzina1" name="godz-roz">
    </td>
    <td style="vertical-align: top;">
      <label for="end-date">Data:</label>
      <input type="date" id="end" name="data-zakon"> <br>
      <label for="end-time">Godzina:</label>
      <input type="time" id="godzina2" name="godz-zakon">
    </td>
  </tbody>
</table>
<input type="button" class="btn btn-primary" value=" " onclick="addField(this);"/>

(https://i.imgur.com/WxV060Y.mp4)

CodePudding user response：

You need to append the copied table to the document body, not back to the table:

function addField(n)
{
    var tblClone = n.previousElementSibling.cloneNode(true);
    document.body.appendChild(tblClone );
}

<table id="tbl" class="table-bordered table-dark">
  <thead>
    <tr>
      <th scope="colgroup">Godzina rozpoczęcia</th>
      <th scope="colgroup">Godzina zakończenia</th>
    </tr>
  </thead>
  <tbody>
    <td style="vertical-align: top;">
      <label for="start-date">Data:</label>
      <input type="date" id="start" name="data-roz"> <br>
      <label for="start-time">Godzina:</label>
      <input type="time" id="godzina1" name="godz-roz">
    </td>
    <td style="vertical-align: top;">
      <label for="end-date">Data:</label>
      <input type="date" id="end" name="data-zakon"> <br>
      <label for="end-time">Godzina:</label>
      <input type="time" id="godzina2" name="godz-zakon">
    </td>
  </tbody>
</table>
<input type="button" class="btn btn-primary" value=" " onclick="addField(this);"/>

CodePudding user response：

var count = 1;
function addField(n)
{
    if(count<=5){
        var table = n.previousElementSibling.children[0].cloneNode(true);
        document.getElementById("table-group").appendChild(table);
    count  ;
    }
    if(count===5){
      document.getElementById('addBtn').style.display='none';
    }
}

<div id="table-group">
<table class="table-bordered table-dark">
  <thead>
    <tr>
      <th scope="colgroup">Godzina rozpoczęcia</th>
      <th scope="colgroup">Godzina zakończenia</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td style="vertical-align: top;">
      <label for="start-date">Data:</label>
      <input type="date" id="start" name="data-roz"> <br>
      <label for="start-time">Godzina:</label>
      <input type="time" id="godzina1" name="godz-roz">
    </td>
    <td style="vertical-align: top;">
      <label for="end-date">Data:</label>
      <input type="date" id="end" name="data-zakon"> <br>
      <label for="end-time">Godzina:</label>
      <input type="time" id="godzina2" name="godz-zakon">
    </td>
    </tr>
  </tbody>
</table>
</div>
<input type="button" id="addBtn" class="btn btn-primary" value=" " onclick="addField(this);"/>