0
나는 html 테이블에 대한 코드를 작성했으며 Excel에서와 같이 화살표 키를 사용하여 위/아래/왼쪽/오른쪽으로 탐색하려고합니다.html 테이블의 화살표 키를 통해 이동
https://jsfiddle.net/daa3muLp/6/은 생성 된 바이올린 게시물입니다. 위쪽/아래쪽 화살표 키와 Ctrl + 오른쪽/왼쪽에서 작동하지만 열이 직원 추가 버튼을 사용하여 동적으로 추가되는 경우 문제가 발생합니다.
<input type="button" value="Add Employee" id="btnAddCol" onclick="window.addCol('dataTable')" />
<table id="dataTable">
<tr id="r_0">
<th></th>
<th>Date</th>
<th>RM</th>
<th>WS</th>
<th>FH</th>
<th>OT-R</th>
<th>OT-W</th>
<th>OT-F</th>
</tr>
<tr id="r_1">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="22-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_1.1" title="ROM, Date: 1" size="1">
</td>
<td>
<input type="text" name="waste_1.1" title="Waste, Date: 1" size="1">
</td>
<td>
<input type="text" name="fh_1.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_1.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_1.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_1.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_2">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="23-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_2.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_2.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_2.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_2.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_2.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_2.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_3">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="24-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_3.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_3.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_3.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_3.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_3.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_3.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_4">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="25-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_4.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_4.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_4.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_4.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_4.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_4.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_5">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="26-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_5.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_5.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_5.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_5.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_5.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_5.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
//cursor movement with keyboard js code
$('input[name^="rom_"], input[name^="waste_"], input[name^="fh_"], input[name^="ot-rom_"], input[name^="ot-waste_"],input[name^="ot-FH_"]').bind('keyup', function(e) {
var isCtrl = false;
if (window.event)
isCtrl = !!window.event.ctrlKey;
else
isCtrl = !!ev.ctrlKey;
var $this = $(this);
var $tr = $this.closest('tr');
var name = this.name.substring(0, this.name.indexOf('_'));
var str = this.name;
row = str.substring(str.indexOf("_") + 1, str.indexOf("."));
pos = str.indexOf("_") + 1;
next = str.replace(row, parseInt(row) + 1);
prev = str.replace(row, parseInt(row) - 1);
if (e.keyCode == 38) {
$('input[name="' + prev + '"]').focus();
} else if (e.keyCode == 40) {
$('input[name="' + next + '"]').focus();
} else if (isCtrl && e.keyCode == 37) {
temp = $this.closest("td").prev().children().focus();
} else if (isCtrl && e.keyCode == 39) {
$this.closest("td").next().children().focus();
}
});
});
window.addCol = function addCol(tableName) {
var countCol = parseInt($("#"+tableName).attr('data-countCol'), 10) || 1;
var row = 0;
$("#"+tableName).attr('data-countCol', ++countCol);
var tempName = $("#"+tableName+" #searchName_1").clone(false, false);
var tempToken = $("#"+tableName + " #searchToken_1").clone(false, false);
tempName.prop("value", "");
tempName.prop("readonly", true);
tempToken.prop("value", "");
tempName.attr("id", "searchName_" + countCol);
tempToken.attr("id", "searchToken_" + countCol);
tempName.prop("name", "searchName_" + countCol);
tempToken.prop("name", "searchToken_" + countCol);
$("#"+tableName+" tr:first ").append("<th colspan=\"6\"> </th>").find("th:last").wrapInner(tempName);
$("#"+tableName+ " tr:nth-child(2)").append("<th colspan=\"6\"></th>").find("th:last").wrapInner(tempToken);
$("#"+tableName +" tr:nth-child(3)").append("<th>R</th><th>W</th> <th>FH</th><th>OTR</th><th>OTW</th><th>OTFH</th>");
$('#dataTable tr:gt(2)').each(
function() {
row = row + 1;
$('<td><input type="text" size=1 name=rom_' + row + '.' + countCol + ' title= "ROM, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=waste_' + row + '.' + countCol + ' title= "Waste, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=fh_' + row + '.' + countCol + ' title= "FH, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" name="ot-rom_' + row + '.' + countCol + '" title= "OT-ROM, Date: '+ row +'" size=1 class="ot" onblur="validateField(this)"> </td><td><input type="text" title= "OT-Waste, Date: '+ row +'" name="ot-waste_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"></td><td><input type="text" title= "OT-FH, Date: '+ row +'" name="ot-FH_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"> </td>').insertAfter($(this).children('td:last'));
}
);
};
</script>
나는 심지어 jquery의 .on()을 사용해 보았지만 작동하지 않았습니다.
에도이 하나 일 ... 나에게 새로웠다 –
이 ... 좋아, 내가 그 .. 덕분에 배운 https://jsfiddle.net/daa3muLp/8/. –