Question

我在每个表格单元格中都有一个表格，如下所示：

<table width="300" border="1" align="center" id="mainTable">
  <tr>
    <td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
    <td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
    <td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
    <td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
  </tr>
</table>

我想知道如何获取表中输入的位置（行和列）（使用javascript）。我知道如何在没有任何内部的常规单元格中进行此操作，但对于单元格内的输入，我似乎无法找到方法。输入中的函数用于其他目的。

Answer 1

将对insertToArray(value)函数的调用修改为insertToArray(this)，然后在函数内部执行

function insertToArray(elem){
            ...

            var tdElem = elem.parentNode;
            var trElem = tdElem.parentNode; 
            console.log("Row: " + trElem.rowIndex);
            console.log("Column: " + tdElem.cellIndex);

            ...
 }

Answer 2

如果您能够获得对表格单元格的引用，那么您只需要访问该节点内的子节点。

你可以使用`childNodes＆＃39;返回一个NodeList对象，然后使用索引来访问子节点，所以在你的情况下，输入框。

示例：

document.getElementById("firstTableCell").childNodes[0].value;

Answer 3

我采用了以下方法，但它使用了来自jquery的keyup监听器：

HTML：

MM'/'dd'/'yyy

JS：

<table width="300" border="1" align="center" id="mainTable">
  <tr>
    <td><input size="1" maxlength="1" /></td>
    <td><input size="1" maxlength="1" /></td>
    <td><input size="1" maxlength="1" /></td>
    <td><input size="1" maxlength="1" /></td>
  </tr>
  <tr>
    <td><input size="1" maxlength="1" /></td>
    <td><input size="1" maxlength="1" /></td>
    <td><input size="1" maxlength="1" /></td>
    <td><input size="1" maxlength="1" /></td>
  </tr>
</table>

希望这有帮助！

Answer 4

它可以通过不同的方式完成，我在这里包含的代码只是为了帮助您更好地理解它，并根据您想要做的事情，这是一个很容易解决您的问题的方法。您可以再次获取索引，这取决于您想要做什么。

HTML：

<table width="300" border="1" align="center" id="mainTable">
  <tr class="row1">
    <td><input class="tableCell" id="cell1" size="1" maxlength="1" /></td>
    <td><input class="tableCell" id="cell2" size="1" maxlength="1" /></td>
    <td><input class="tableCell" id="cell3" size="1" maxlength="1" /></td>
    <td><input class="tableCell" id="cell4" size="1" maxlength="1" /></td>
  </tr>
</table>

JS

window.onload = function() {
  var cells = document.getElementsByClassName("tableCell");
  for (var x = 0; x < cells.length; x++) {
    cells[x].addEventListener("keyup", function(e) {

    //  get row class name: 
    var rowClass = (e.target).parentElement.parentElement.className;
    alert("Row classname: " + rowClass);

    // get the value insede the cell:
    var cellValue = (e.target).value;
    alert("Value entered: " + cellValue);

    var cellId = e.target.id;
    alert("Cell ID: " + cellId);
  });
}

Answer 5

您可以使用实用程序方法查找最近的父级使用标签名称：

这是一个例子

key = convertorClassName

function getClosestParent( needle, haystack ) {
	var parent = null;
	var target = needle.toUpperCase();
	var element = haystack.parentElement;

	while ( parent == null ) {
		if ( element !== null ) {
			if ( element.tagName === target ) {
				parent = element;
			}
		}
		else {
			break;
		}

		element = element.parentElement;
	}

	return parent;
}

document.querySelector("input").addEventListener("click", function() {
  var row = getClosestParent("tr", this)
  var column = getClosestParent("td", this)

  alert(row);
  alert(column);
})

Answer 6

我找到了一个很好的方法。

我有2个全局变量代表列和行对象（tr，td）

function returnParent(x)
{
    parentOfInput = x.parentNode; //td level
    parentOfTd = parentOfInput.parentNode; //tr level
}

我把这个函数和其他函数一起调用（注意我首先调用returnParent（），因为当我在输入中输入内容时我想要第一个位置）：

<table width="300" border="1" align="center" id="mainTable">
  <tr>
    <td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
    <td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
    <td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
    <td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>

最后在我的insertToArray（value）函数中，我得到了这样的列和行：

function insertToArray(value)
{

    var a = value;
    //get the cell position using parentNode
    tableCol = parentOfInput.cellIndex;
    tableRow = parentOfTd.rowIndex;
}

获取表格单元格HTML中的输入位置

6 个答案: