CODEWITHSUNDEEP
javascripthtml
ivansimonov007
ivansimonov007

Reputation: 105

How to overwrite data in a table?

Trying to create a table with data-attributes when clicking on a link

The problem is most likely in this code

I can not understand how to rewrite the data in the table. Now the data is sequentially added to the table.

My code - https://jsfiddle.net/347x8bwq/

(function() {

  'use strict';

  function createTable() {
    let link = document.querySelectorAll('.link');
    let block = document.querySelector('.block');
    let blockTable = document.querySelector('.table');

    for (let i = 0; i < link.length; i++) {

      let links = link[i];

      links.addEventListener('click', function(e) {
        e.preventDefault();

        let linkData = this.dataset;

        for (let j in linkData) {
          let tableRow = document.createElement('tr');

          let arr = linkData[j].split('|');
          for (let k = 0; k < arr.length; k++) {
            let tableCol = document.createElement('td');
            tableCol.innerHTML = arr[k];
            tableRow.appendChild(tableCol);

          }

                    blockTable.appendChild(tableRow);

        }       


      });
    }
  }
  createTable();

Desired behavior - when clicking on a link each time - a new table was created

Upvotes: 0

Views: 1661

Answers (2)

Evghenii
Evghenii

Reputation: 245

You have to clear the table before adding a new elements. Just add blockTable.innerHTML = ''; after e.preventDefault();

https://jsfiddle.net/vLm60kzq/

Upvotes: 1

random
random

Reputation: 7891

Before you append your tableRow to the blockTable, clear its innerHTML.

(function() {

  'use strict';

  function createTable() {
    let link = document.querySelectorAll('.link');
    let block = document.querySelector('.block');
    let blockTable = document.querySelector('.table');

    for (let i = 0; i < link.length; i++) {

      let links = link[i];

      links.addEventListener('click', function(e) {
        e.preventDefault();

        let linkData = this.dataset;
        blockTable.innerHTML = "";


        for (let j in linkData) {
          let tableRow = document.createElement('tr');

          let arr = linkData[j].split('|');
          for (let k = 0; k < arr.length; k++) {
            let tableCol = document.createElement('td');
            tableCol.innerHTML = arr[k];
            tableRow.appendChild(tableCol);
          }
          blockTable.appendChild(tableRow);

        }

      });
    }
  }
  createTable();



})();
.table {
    width: 100%;
    table-layout: fixed;
}

td {
    border: 1px solid #ccc;
}

.link {
    display: block;
    margin-bottom: 5px;
}

.block {
    padding: 25px;
    border: 1px solid #000;
}
<a href="#" class="link" data-title="Атрибут1|Title" data-subtitle="Атрибут2|Subtitle" data-num="Атрибут3|1234">Link 1</a>

<a href="#" class="link" data-text="Атрибут1|Title" data-online="Атрибут2|off">Link 2</a>

<a href="#" class="link" data-text="Атрибут55|Title text" data-online="Атрибут02|Bubu">Link 3</a>


<div class="block">
  <table class="table">
    <tr>
      <td>Атрибут1</td>
      <td>Title</td>
    </tr>
    <tr>
      <td>Атрибут2</td>
      <td>Subtitle</td>
    </tr>
    <tr>
      <td>Атрибут3</td>
      <td>1234</td>
    </tr>
  </table>
</div>

See - https://jsfiddle.net/2wvm6de8/

Upvotes: 3

Related Questions