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

Posted 2023-03-05

【中文标题】在单元格javascript中设置类型文本

【英文标题】：Set type text inside cell 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();

【问题讨论】：

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

【参考方案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();

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

【参考方案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;
  

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