Question

您好我正在尝试将HTML DOM表转换为文本区域。例如，我在页面上生成了一个包含数据的表。当用户单击编辑按钮时，单个单元格应转换为文本区域，以便可以对其进行编辑。例如我的代码

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(-1);
    var cell2 = row.insertCell(-1);
    var cell3 = row.insertCell(-1);
    cell1.innerHTML = "data";
    cell2.innerHTML = "data";
    cell3.innerHTML = "data";
}

由于

Answer 1

我使用contenteditable DOM元素在我之前的项目中实现了类似的行为。当用户点击表单元格时，您可以按以下方式切换该元素的contenteditable属性，而不是将表格单元格转换为文本区域

var table = document.getElementById("myTable");
table.addEventListener('click', function(e) {

    var target = e.target;
    //test if clicked element is TD.
    if (target && target.tagName && target.tagName.toLowerCase() == "td")
    {
        //make cell editable
        target.setAttribute('contenteditable', 'true');
        //on blur close the editable field and return to normal cell.
        target.onblur = function(){this.removeAttribute('contenteditable');}
    }

});

这里我假设你的每个表格单元格里面都有一个<div>。您可以使用CSS对其进行适当的样式设置，使其看起来像textarea。再次，当用户在任何单元格外部单击时，您需要删除先前所选单元格的contenteditable属性，以使其再次看起来像常规单元格。希望它有所帮助！

Answer 2

制作表contenteditable

非常简单

＆＃13;

var editBtn = document.querySelectorAll("button[class^=edit-]");

function editTable(){
  var id = "table-"+this.className.match(/\d+/);
  var table = document.getElementById(id);
  var ed = table.iseditable^=1;
  table[ed?"setAttribute":"removeAttribute"]("contenteditable", true);
  this.textContent = ed ? "SAVE" : "EDIT"
}

for(var i=0; i<editBtn.length; i++){
  editBtn[i].addEventListener("click", editTable, false);
}

＆＃13;

table td{
  padding:5px 10px;
  background:#eee;
}
table[contenteditable]{
  outline: 2px dashed #ad8;
}

＆＃13;

  <table id="table-1">
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
  </table>
  
  <button class="edit-1">EDIT</button>
  
  
  <table id="table-2">
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
    <tr><td>Data1</td><td>Data2</td><td>Data3</td></tr>
  </table>
  
  <button class="edit-2">EDIT</button>

＆＃13;

按钮具有编号的类。要检索引用的表ID，请在editTable()函数内检索数字并使用以下方法从类中创建ID

var id = "table-"+this.className.match(/\d+/);

比使用^=1切换HTMLElement属性（1,0,1,0,....），并用作布尔值，你可以切换你需要的任何东西。属性，textContent等。

Answer 3

这应该可以解决问题。

解决方案1;单击一个单元格可以编辑

var table = document.getElementById("myTable");
table.addEventListener('click', function(e) {

    var target = e.target;
    //test if clicked element is TD.
    if (target && target.tagName && target.tagName.toLowerCase() == "td")
    {
        //make cell editable
        target.setAttribute('contenteditable', 'true');
        //on blur close the editable field and return to normal cell.
        target.onblur = function(){this.removeAttribute('contenteditable');}
    }

});

解决方案2;点击编辑可以编辑所有单元格

var editBtn = document.getElementById("editbutton") //this is pseudo, change it to reflect your own button
var table = document.getElementById("myTable");

editBtn.addEventListener('click', function(e) {
    var tdList = table.querySelectorAll("td"); //select all td elements

    for (var i = 0; i < tdList.length; ++i)
    {
         //iterate over all cells and set contentEditable to true, allows user input.
         tdList[i].setAttribute("contentEditable", true);

         //if you want textArea you can do this (it's commented out)
         //Choose one of these methods, or the contentEditable or textarea
         /*
         var tempNode = document.createElement("textArea");
         tempNode.style.height = "100%";
         tempNode.style.width = "100%";
         tempNode.style.border= "0px solid transparent";
         tempNode.value = tdList[0].textContent;
         tdList[i].innerHTML = "";//wipe content of td
         tdList[i].appendChild(tempNode);
         */
    }

});

当然，保存按钮可以使用相同的循环来迭代所有TD。您可以使用以下

访问td / textarea的值

tdList[i].textContent; //contentEditable
tdList[i].children[0].value; //textarea.

快乐的编码。

将html单元格转换为文本区域

3 个答案:

解决方案1;单击一个单元格可以编辑

解决方案2;点击编辑可以编辑所有单元格