Question

在单击链接时尝试创建具有数据属性的表

此代码中最有可能出现问题

我不明白如何重写表中的数据。现在，数据将顺序添加到表中。

(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();

期望的行为-每次单击链接时-创建了一个新表

Answer 1

在将tableRow附加到blockTable之前，请清除其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>

请参阅-https://jsfiddle.net/2wvm6de8/

Answer 2

您必须先清除表，然后再添加新元素。只需在blockTable.innerHTML = '';之后添加e.preventDefault();

https://jsfiddle.net/vLm60kzq/

如何覆盖表中的数据？

2 个答案: