Question

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

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

这是我要使用的表的一个示例（无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;
}

Answer 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>

Answer 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的变量。

Answer 3

您只需要获取输入行和col值并传递其索引。

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>

Answer 4

假设您输入正确的现有行和列数字，则函数 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;

}

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

4 个答案: