javascript - 仅使用 addEventListener 获取输入元素行和列

Question

初学者 Javascript 问题:

1) 在用户在特定输入元素上输入一些数据并点击 后，我需要获取输入元素的列和行。

我想使用 addEventListener 而不是为表中的每个元素添加事件。

2)我需要将焦点设置在下一条记录上，即用户完成当前行后的第一列。

window.addEventListener(
  "keydown",
  function(event) {
    let str =
      "KeyboardEvent: key='" + event.key + "' | code='" + event.code + "'";
    
    //Need #1. need to know row and col here 
    //something like
    alert(this.cellIndex);
    alert(this.parentNode.parentNode.rowIndex);
    //to do stuff
    //switch(col)
    // case 0:
    //    do stuff for date here ex: instead of date,if user enter S and hit <enter>. I would put today's date on this field
    // case 1:
    //    do stuff for description here
    //Need #2. Set focus to next row set at date field for user to continue data entry
    
    let el = document.createElement("span");
    el.innerHTML = str + "<br/>";
 document.getElementById("output").appendChild(el);
  },
  true
);

function InsertServiceLineRow(r) {
  SrvTbl = document.getElementById("SrvLineTbl");
  var i = Number(r.parentNode.parentNode.rowIndex) + 2; //to account for the two header rows
  var Row = (SrvTbl.insertRow(i).innerHTML =
    '<tr><td><input type="text" size=10 name="Date"</td><td><input type="text" size=30 name="Desc"</td><td><label onclick="InsertServiceLineRow(this)">+</label><label onclick="RemoveServiceLineRow(this)">--</label></td></tr>');
  var Row = (SrvTbl.insertRow(i + 1).innerHTML =
    '<tr><td colspan=3>Notes<input type="text" size=50 name="Note"</td></tr>');
}

function RemoveServiceLineRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("SrvLineTbl").deleteRow(i);
  document.getElementById("SrvLineTbl").deleteRow(i);
}

table,
th,
td {
  font-family: verdana;
  font-size: 13px;
  padding: 4px;
  border-collapse: collapse;
  border: 0.1px solid black;
}
th {
  color: white;
  background-color: #81C784;
}

<table id="SrvLineTbl">
  <tr>
    <th>Date</th>
    <th>Description</th>
    <th>Add/Rem Row</th>
  </tr>
  <tr>
    <th colspan=3>Notes</th>
  </tr>
  <tr>
    <td><input type="text" size=10 name="Date" </td>
      <td><input type="text" size=30 name="Desc" </td>
        <td size=20><label for="Add" onclick="InsertServiceLineRow(this)">+</label>
          <label for="Rem" onclick="RemoveServiceLineRow(this)">--</label>
        </td>
  </tr>
  <tr>
    <td colspan=3>Notes<input type="text" size=50 name="Note" </td>
  </tr>
</table>
<div id="output">
</div>

Answer 1

所以我在这里编写的代码做了你想要的，最后一点很令人困惑，因为无法确定用户是否真的完成了一行，请引用下面的代码并让我知道在哪里这是缺乏的。

document.getElementById("SrvLineTbl").addEventListener(
  "keydown",
  function(event) {
    let str =
      "KeyboardEvent: key='" + event.key + "' | code='" + event.code + "'";
    
    //Need #1. need to know row and col here 
    //something like
    console.log("The row is : ", event.target.parentElement.parentElement.rowIndex);
    console.log("The column is : ", event.target.parentElement.cellIndex);
    //to do stuff
    //switch(col)
    // case 0:
    //    do stuff for date here ex: instead of date,if user enter S and hit <enter>. I would put today's date on this field
    // case 1:
    //    do stuff for description here
    //Need #2. Set focus to next row set at date field for user to continue data entry
    
    let el = document.createElement("span");
    el.innerHTML = str + "<br/>";
 document.getElementById("output").appendChild(el);
  },
  true
);
for (var j of document.querySelectorAll("#SrvLineTbl tr > td label:nth-child(1)")){
  j.addEventListener("click", InsertServiceLineRow);
}
for (var j of document.querySelectorAll("#SrvLineTbl tr > td label:nth-child(2)")){
  j.addEventListener("click", RemoveServiceLineRow);
}
function InsertServiceLineRow(r) {
  SrvTbl = document.getElementById("SrvLineTbl");
  console.log(SrvTbl);
  var i = Number(r.target.parentElement.parentElement.rowIndex) + 2; //to account for the two header rows
  var Row = (SrvTbl.insertRow(i).innerHTML =
    '<tr><td><input type="text" size=10 name="Date"</td><td><input type="text" size=30 name="Desc"</td><td><label>+</label><label>--</label></td></tr>');
  var Row = (SrvTbl.insertRow(i + 1).innerHTML =
    '<tr><td colspan=3>Notes<input type="text" size=50 name="Note"</td></tr>');
      SrvTbl.querySelector("#SrvLineTbl tr:nth-child(" + (i + 1) + ") > td label:nth-child(1)").addEventListener("click", InsertServiceLineRow);
      SrvTbl.querySelector("#SrvLineTbl tr:nth-child(" + (i + 1) + ") > td label:nth-child(2)").addEventListener("click", RemoveServiceLineRow);
}

function RemoveServiceLineRow(r) {
  var i = r.target.parentElement.parentElement.rowIndex;
  document.getElementById("SrvLineTbl").deleteRow(i);
  document.getElementById("SrvLineTbl").deleteRow(i);
}

table,
th,
td {
  font-family: verdana;
  font-size: 13px;
  padding: 4px;
  border-collapse: collapse;
  border: 0.1px solid black;
}
th {
  color: white;
  background-color: #81C784;
}

<table id="SrvLineTbl">
  <tr>
    <th>Date</th>
    <th>Description</th>
    <th>Add/Rem Row</th>
  </tr>
  <tr>
    <th colspan=3>Notes</th>
  </tr>
  <tr>
    <td><input type="text" size=10 name="Date" ></td>
      <td><input type="text" size=30 name="Desc"> </td>
        <td size=20><label for="Add">+</label>
          <label for="Rem">--</label>
        </td>
  </tr>
  <tr>
    <td colspan=3>Notes<input type="text" size=50 name="Note"> </td>
  </tr>
</table>
<div id="output">
</div>