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

Converting html cell into text area

本文关键字：文本 区域 转换 html 单元格      更新时间：2023-09-26

嗨，我正在尝试将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";
}

谢谢

这应该可以解决问题。

解决方案 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/文本区域的值

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

快乐编码。

我在早期项目中使用内容可编辑的 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 适当地设置其样式，使其看起来像文本区域。同样，当用户在任何单元格外部单击时，您需要删除先前选择的单元格的 contenteditable 属性，使其再次看起来像常规单元格。希望对您有所帮助！

让你的表格contenteditable非常简单 

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);
}
table td{
  padding:5px 10px;
  background:#eee;
}
table[contenteditable]{
  outline: 2px dashed #ad8;
}
  <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>

这些按钮具有编号的类。若要检索引用的表 ID，请在 editTable() 函数中检索数字并使用以下命令从类中创建 ID：

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

而不是使用^=1切换 HTMLElement 属性，这将做 （1,0,1,0,.... ），并用作布尔值，您可以切换您需要的任何内容。属性、文本内容等

相关文章：