Question

我在单击按钮时创建动态表的代码

每次点击“创建表格”按钮添加表格行

-Createlist()

-Deletelist()在“删除表格”按钮上删除行

var flag =0;
function createlist(){
    var info = {};
    info.name = document.forms["myform"]["name"].value;
    info.gender = document.forms["myform"]["gender"].value;
    info.age = document.forms["myform"]["age"].value;
    var header;
    var node = [];
    node[0] = document.createTextNode('Name');
    node[1] = document.createTextNode('Gender');
    node[2] = document.createTextNode('Age');

    if(flag==0){
        for(var i=0;i<3;i++){
            var header = document.createElement('TH');
            header.setAttribute('class','header');
            header.appendChild(node[i]);
            document.getElementById('list').appendChild(header);
            flag = 1;
        }
    }

    var tr = document.createElement('TR');
    for(var key in info){
        if (info.hasOwnProperty(key)) {
            var td = document.createElement('TD');
            td.textContent = info[key];
            tr.appendChild(td);
        }
    }
    document.getElementById('list').appendChild(tr);
}

Answer 1

有两种方法。首先，您可以在创建表时将数据保存在服务器中，并在页面重新加载后获取它们。或者您可以使用localStorage来存储内容。]

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
   //if not support storage I think you can append the data to the url, and parse the url after page reload
}

Answer 2

您可以使用html5 localstorage临时保存表数据，并在页面刷新时将其读回。

Answer 3

您可以使用 localStorage.setItem（）

localStorage.setItem(name,"harsh");
localStorage.setItem(gender,"male");
localStorage.setItem(age,"24");

Answer 4

我并不是这种方法的粉丝。我建议为此使用数据库，并在每个页面加载时获取数据。如果有人建立了一个庞大的表格，那么这些信息将被存储在浏览器的localStorage中......

但是如果你坚持下去，下面就是我如何实现它的一个例子。 请注意，出于安全原因，这不适用于SO 。有关实时工作示例，请查看this fiddle。确保使用简洁的命名。我使用的mytable示例不是一个很好的示例，因为如果他也使用它，则另一个dev可以覆盖它。

＆＃13;

// this one reads the table and adds it to the storage
function addToStorage() {
  const rows = document.querySelectorAll('#t tbody tr');
  const col1 = []; // each column will have their own array. Please name them accordingly
  const col2 = [];
  for (let i = 0; i < rows.length; ++i) {
    const tds = rows[i].children;
    col1.push(tds[0].textContent);
    col2.push(tds[1].textContent);
  }
  // "mytable" is just an example. PLEASE PICK A GOOD AND CONCISE NAME !
  window.localStorage.setItem('mytable', JSON.stringify({
    col1: col1,
    col2: col2
  })); 
}

// this one cleans the table (to show PoC)
function clearTable() {
  const t = document.querySelector('#t tbody');
  t.innerHTML = '';
}

// duh
function makeTd(txtContent) {
    const td = document.createElement('td');
    td.textContent = txtContent;
    return td;
}

// this one gets the info from storage and displays the table content if present
function getFromStorage() {
  const infoFromStorage = window.localStorage.getItem('mytable');
  if (infoFromStorage) {
      const json = JSON.parse(infoFromStorage);
      const tbody = document.querySelector('#t tbody');
      for(let i = 0; i < json.col1.length; ++i) {
          const tr = document.createElement('tr');
          tr.appendChild(makeTd(json.col1[i])); // note, column names must match with that one in addToStorage
          tr.appendChild(makeTd(json.col2[i]));
          tbody.appendChild(tr);
      }
  }
  else {
    console.log('not present in storage. Find a tactic to handle this');
  }
}



document.getElementById('add').addEventListener('click', addToStorage);
document.getElementById('clear').addEventListener('click', clearTable);
document.getElementById('get').addEventListener('click', getFromStorage);

＆＃13;

<button id="add">Add to storage</button>
<button id="clear">Clear</button>
<button id="get">Get from storage</button>
<table id="t">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo_1</td>
      <td>foo_2</td>
    </tr>
    <tr>
      <td>bar_1</td>
      <td>bar_2</td>
    </tr>
    <tr>
      <td>lorum</td>
      <td>ipsum</td>
    </tr>
  </tbody>
</table>

＆＃13;

如何在窗口重新加载后保留动态创建的表

4 个答案: