Question

我有一个包含一些可编辑单元格的表格。我可以获得更新的值并保存更改没有问题。我的网站的一部分是跟踪更改历史记录，因此我需要知道是否有任何使用Javascript或JQuery的内容来获取单元格的原始值，从最初加载页面开始。（与输入的.defaultValue相当的东西会很好。）

我一直在环顾四周，但没有发现任何可以真正做到这一点。

谢谢，乍得

Answer 1

您可以使用data属性。这里的基本示例：

<!doctype html>
<html>
<body>
  <div id="example" data-init="This is the initial content.">This is the initial content.</div>
  <button id="show" type="button">Click here to show the initial content</button>
<script>
  var exampleDIV = document.getElementById('example'),
      showBUTTON = document.getElementById('show');

  // change the content of the element
  exampleDIV.innerHTML = 'The content has been changed.';

  // get the initial content
  showBUTTON.addEventListener('click',function(){
    alert(exampleDIV.getAttribute('data-init'));
  });
</script>
</body>
</html>

工作示例here。

更新

如果您想使用JavaScript插入数据属性，可以使用：

<!doctype html>
<html>
<body>
<table id="sample">
  <tr>
    <td contentEditable="true">Initial Value 01</td>
    <td contentEditable="true">Initial Value 02</td>
    <td contentEditable="true">Initial Value 03</td>
  </tr>
  <tr>
    <td contentEditable="true">Initial Value 04</td>
    <td contentEditable="true">Initial Value 05</td>
    <td contentEditable="true">Initial Value 06</td>
  </tr>
  <tr>
    <td contentEditable="true">Initial Value 07</td>
    <td contentEditable="true">Initial Value 08</td>
    <td contentEditable="true">Initial Value 09</td>
  </tr>
  <tr>
    <td contentEditable="true">Initial Value 10</td>
    <td contentEditable="true">Initial Value 11</td>
    <td contentEditable="true">Initial Value 12</td>
  </tr>
</table>
<br>
Cell #<input id="cellno" name="cellno" type="number" min="1" max="12" value="1">
<button type="button" id="show">Show Initial Value</button>
<script>
  var sampleTABLE = document.getElementById('sample'),
      showBUTTON = document.getElementById('show'),
      cellnoINPUT = document.getElementById('cellno'),
      cellsTD = sampleTABLE.getElementsByTagName('td');

  // store all values in data attributes
  for(var i=0,l=cellsTD.length;i<l;i++){
    cellsTD[i].setAttribute('data-init',cellsTD[i].innerHTML);
  }

  // get the initial content
  showBUTTON.addEventListener('click',function(){
    alert(cellsTD[cellnoINPUT.value - 1].getAttribute('data-init'));
  });
</script>
</body>
</html>

示例here。

获取可编辑的原始文本/值

1 个答案:

更新