通过用户输入和 Javascript 更改特定表格单元格中的文本

Posted 2023-03-05

【中文标题】通过用户输入和 Javascript 更改特定表格单元格中的文本

【英文标题】：Change text in specific table cell by user input and Javascript

【发布时间】：2019-04-04 09:44:52

【问题描述】：

如何根据用户输入更改单元格的内容？

用户应该能够更改单元格和该单元格中的文本。

这是我要使用的表格示例（没有td id）：

<table border="1" id="tbl">
  <tr><td>text</td><td>text</td><td>text</td></tr>
  <tr><td>text</td><td>text</td><td>text</td></tr>
</table>

我猜这是一些输入字段：

<label for="row">Row: </label>
<input type="number" id="row" value="1" />

<label for="col">Column: </label>
<input type="number" id="col" value="1" />

<label for="textOut">Tekst: </label>
<input type="text" id="tblText" name="text" value="Some text"/>

<button onclick="changeTable()">Change cell</button>

这就是我迷路的地方......我已经在网上搜索了几个小时，并且尝试了很多不同的东西，但我完全陷入困境。不用说我真的是 javascript 新手...

var tbl = document.getElementById("tbl");

function changeTable () 
  var row = document.getElementById("tbl").rows;
  var col = row[0].cells;
  col[0].innerhtml = document.getElementById("tblText").value;

【参考方案1】：

你已经走得很远了。您需要做的就是获取目标行和列，从 0 开始补偿数组，验证用户输入不小于 1 且不大于列和行的大小。

如果您不验证用户输入，如果您输入的数字小于 1 或大于列数，则可能会出错，因此我使用了 Math.min 和 Math.max 函数。对从 0 开始的数组进行补偿的最小 0 和最大列/行大小。

如果用户输入的值大于或小于允许的值，您也可以弹出警报。

var tbl = document.getElementById("tbl");

function changeTable()
  var rowUserInput = parseInt(document.getElementById("row").value)-1; // user input compensated for arrays starting at 0
  var colUserInput = parseInt(document.getElementById("col").value)-1; // user input compensated for arrays starting at 0
  var row = document.getElementById("tbl").rows;
  var targetRow = Math.min(Math.max(rowUserInput
        , 0), // we want the maximum of user input and 0, so the value to use will never be less then 0
        row.length - 1); // we want the minimum of user input and the number of rows compensated for arrays starting at 0, so we will never try to change a row higher then exists
  var col = row[targetRow].cells;
  var targetCol = Math.min(Math.max(colUserInput    
    , 0), // we want the maximum of user input and 0, so the value to use will never be less then 0
    col.length - 1); // we want the minimum of user input and the number of columns compensated for arrays starting at 0, so we will never try to change a column higher then exists
 
  if(rowUserInput !== targetRow) 
    console.log('You tried to use a non existing row!');
  
  
  if(colUserInput !== targetCol) 
    console.log('You tried to use a non existing column!');
  
 
  col[targetCol].innerHTML = document.getElementById("tblText").value;

<table border="1" id="tbl">
  <tr><td>text row 1</td><td>text</td><td>text</td></tr>
  <tr><td>text row 2</td><td>text</td><td>text</td></tr>
</table>

<label for="row">Row: </label>
<input type="number" id="row" value="1" />

<label for="col">Column: </label>
<input type="number" id="col" value="1" />

<label for="textOut">Tekst: </label>
<input type="text" id="tblText" name="text" value="Some text" />
<button onclick="changeTable()">Change cell</button>

【参考方案2】：

var tbl = document.getElementById("tbl");

function changeTable () 
  var row = document.getElementById("tbl").rows;
  var r= document.getElementById("row").value
  var c= document.getElementById("col").value
  var col = row[r].cells;
  col[c].innerHTML = document.getElementById("tblText").value;

您忘记从输入标签中读取行号和列号。在这里，我为行值和列值声明了两个名为 r 和 c 的变量。

【讨论】：

谢谢！这真的很有帮助。我只是将 row[r] 更改为 row [r-1] 并将 col[c] 更改为 col[c-1]。我相信这是因为表遵循与数组相同的逻辑，也许吧？

【参考方案3】：

假设您输入正确的现有 行 和 列 数字，您的函数 changeTable 应该是

function changeTable()
  // Get all the rows of the table
  var rows = document.getElementById("tbl").rows;

  // Target row and col index
  var targetRow = document.getElementById("row").value;
  var targetCol = document.getElementById("col").value;

  // Target row with all its cells
  var targetRowCells = rows[targetRow].cells;

  // Target row with the target col (target cell) changed with the new value
  targetRowCells[targetCol].innerHTML = document.getElementById("tblText").value;

【参考方案4】：

您只需要获取输入行和列值并传递它们的索引。

var tbl = document.getElementById("tbl");

function changeTable()
  const rowId = document.getElementById("row").value;
  const colId = document.getElementById("col").value;
  
  var row = document.getElementById("tbl").rows;
  var col = row[rowId - 1].cells;
  col[colId - 1].innerHTML = document.getElementById("tblText").value;

 <table border="1" id="tbl">
  <tr><td>text</td><td>text</td><td>text</td></tr>
  <tr><td>text</td><td>text</td><td>text</td></tr>
</table>
<label for="row">Row: </label>
<input type="number" id="row" value="1" />

<label for="col">Column: </label>
<input type="number" id="col" value="1" />

<label for="textOut">Tekst: </label>
<input type="text" id="tblText" name="text" value="Some text" />
<button onclick="changeTable()">Change cell</button>

【讨论】：

那么你可以添加一些关于正确索引值的验证