在单元格javascript中设置类型文本答案

【问题标题】：Set type text inside cell javascript在单元格javascript中设置类型文本
【发布时间】：2022-01-21 11:54:42
【问题描述】：

我想在单元格内输入文本，但我尝试使用 td 设置属性，但它不起作用。请帮助我如何设置属性以在单元格中键入文本。感谢您的帮助！

function addTable() {

    rn = window.prompt("Input number of rows", 1);
    cn = window.prompt("Input number of columns",1);

    var myTableDiv = document.getElementById("myDynamicTable");

    var table = document.createElement('TABLE');
    table.border = '1';
  
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
  
    for (var i = 0; i < parseInt(rn, 10); i++) {
      var tr = document.createElement('TR');
      tableBody.appendChild(tr);
  
      for (var j = 0; j < parseInt(cn, 10); j++) {
        var td = document.createElement('TD');
        td.width = '75';
        td.appendChild(document.createTextNode("text"));
        tr.appendChild(td);
      }
    }
    myTableDiv.appendChild(table);
  }
addTable();

【问题讨论】：

在下面查看我的答案...

标签： javascript html-table attributes

【解决方案1】：

您需要创建一个input 元素，然后将其附加到td：

rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns", 1);

var myTableDiv = document.getElementById("myDynamicTable");

var table = document.createElement('TABLE');
table.border = '1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

for (var i = 0; i < parseInt(rn, 10); i++) {
  var tr = document.createElement('TR');
  tableBody.appendChild(tr);

  for (var j = 0; j < parseInt(cn, 10); j++) {
    var td = document.createElement('TD');
    td.width = '75';
    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('value', 'text');
    td.appendChild(input);
    tr.appendChild(td);
  }
}
myTableDiv.appendChild(table);

<div id="myDynamicTable">
</div>

【讨论】：

【解决方案2】：

你可以使用contenteditable属性：td.contenteditable = 'true';。

根据您希望如何使用此值，您还可以插入一个input 元素。

【讨论】：

两者实际上都有效，因为它被解释为 html 属性。
这是我见过的最奇怪的

【解决方案3】：

您可能正在寻找contentEditable？

function addTable() {

  const rn = +window.prompt("Input number of rows", 1);
  const cn = +window.prompt("Input number of columns", 1);

  const myTableDiv = document.getElementById("myDynamicTable");

  const table = document.createElement('table');
  table.border = '1';

  const tableBody = document.createElement('tbody');
  table.appendChild(tableBody);

  for (let i = 0; i < rn; i++) {
    var tr = document.createElement('tr');
    tableBody.appendChild(tr);

    for (let j = 0; j < cn; j++) {
      var td = document.createElement('td');
      td.width = '75';
      td.contentEditable = true;
      td.appendChild(document.createTextNode("text"));
      tr.appendChild(td);
    }
  }
  myTableDiv.appendChild(table);
}
addTable();

&lt;div id="myDynamicTable"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

如果你想对表进行操作，use corrects javascript instructions ...

const 
  DynTb = document.getElementById('myDynamicTable')
  rn    = +window.prompt("Input number of rows", 1) 
, cn    = +window.prompt("Input number of columns", 1)
  ;
if( isNaN(rn) || isNaN(cn))
  throw 'bad integer input value (s)'

const myTable = addTable(DynTb, rn, cn )

function addTable(tDiv, rn, cn) 
  {
  let 
    tab = tDiv.appendChild( document.createElement('table') )
  , tBy = tab.createTBody()
    ;
  for(let r=0;r<rn;++r)
    {
    let row = tBy.insertRow() 
    for(let c=0;c<cn;++c) 
      {
      row.insertCell().innerHTML = 
          `<input type="text" placeHolder="${r}-${c}">`
    } }
  return tab
  }

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td {
  padding    : .2em;
  border     : 1px solid darkblue;
  }
input {
  width : 5em;
  }

&lt;div id="myDynamicTable"&gt;&lt;/div&gt;

【讨论】：