初学者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);
}
&#13;
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;
}
&#13;
<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>
&#13;
答案 0 :(得分: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);
}
&#13;
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;
}
&#13;
<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>
&#13;