Javascript 获取可编辑的原始文本/值<；td>；_Javascript_Jquery_Html

Javascript 获取可编辑的原始文本/值<；td>；

javascript jquery html

Javascript 获取可编辑的原始文本/值<；td>；,javascript,jquery,html,Javascript,Jquery,Html,我有一个带有一些可编辑单元格/的表格。我可以获得更新后的值并毫无问题地保存更改。我的站点的一部分是跟踪更改历史记录，因此我需要知道是否有Javascript或JQuery可以从最初加载页面时获取cell/的原始值。（输入的值应该与.defaultValue相当。）我一直在四处寻找，但没有找到任何能真正做到这一点的东西谢谢， Chad您可以为此使用数据属性。这里的基本示例： <!doctype html> <html> <body> <div id

我有一个带有一些可编辑单元格/的表格。我可以获得更新后的值并毫无问题地保存更改。我的站点的一部分是跟踪更改历史记录，因此我需要知道是否有Javascript或JQuery可以从最初加载页面时获取cell/的原始值。（输入的值应该与.defaultValue相当。）

我一直在四处寻找，但没有找到任何能真正做到这一点的东西

谢谢，

Chad

您可以为此使用

数据属性。这里的基本示例：
<!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>


这是最初的内容。
单击此处显示初始内容
var exampleDIV=document.getElementById（'example'），
showBUTTON=document.getElementById（'show'）；
//更改元素的内容
exampleDIV.innerHTML='内容已更改'；
//获取初始内容
showBUTTON.addEventListener（'单击'，函数（））{
警报（例如，div.getAttribute（'data-init'））；
});

工作示例
更新
如果要使用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>


初始值01
初始值02
初始值03
初始值04
初始值05
初始值06
初始值07
初始值08
初始值09
初始值10
初始值11
初始值12


细胞#
显示初始值
var sampleTABLE=document.getElementById（'sample'），
showBUTTON=document.getElementById（'show'），
cellnoINPUT=document.getElementById（'cellno'），
cellsTD=sampleTABLE.getElementsByTagName（'td'）；
//将所有值存储在数据属性中
对于（var i=0，l=cellsTD.length；i您可以使用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>


这是最初的内容。
单击此处显示初始内容
var exampleDIV=document.getElementById（'example'），
showBUTTON=document.getElementById（'show'）；
//更改元素的内容
exampleDIV.innerHTML='内容已更改'；
//获取初始内容
showBUTTON.addEventListener（'单击'，函数（））{
警报（例如，div.getAttribute（'data-init'））；
});

工作示例
更新
如果要使用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>


初始值01
初始值02
初始值03
初始值04
初始值05
初始值06
初始值07
初始值08
初始值09
初始值10
初始值11
初始值12


细胞#
显示初始值
var sampleTABLE=document.getElementById（'sample'），
showBUTTON=document.getElementById（'show'），
cellnoINPUT=document.getElementById（'cellno'），
cellsTD=sampleTABLE.getElementsByTagName（'td'）；
//将所有值存储在数据属性中
对于（var i=0，l=cellsTD.length；iYou可以在页面加载后立即通过JavaScript读取和存储值。没有任何方法可以做到这一点，只能在某个位置手动存储初始值。您可以在页面加载后立即通过JavaScript读取和存储值。没有任何方法可以做到这一点，只能在某个位置手动存储初始值E