0
이 코드에는 오른쪽에 하나, 왼쪽에 다른 두 개의 컨테이너가 있습니다. 왼쪽에는 사용자가 세부 사항을 입력하고 "저장"버튼을 누르고 "Excel과 같은"형식을 가진 오른쪽 컨테이너에 세부 사항을 저장하는 구조와 같은 양식이 포함되어 있습니다 ...자바 스크립트를 사용하여 행을 동적으로 편집
오른쪽 컨테이너에는 많은 행 그리고 제한된 수의 열 ... 그리고 모든 행은 각각의 "편집/삭제"버튼을 사용하여 업데이트하거나 삭제합니다.
문제는 "행의"세부 정보를 왼쪽 컨테이너 폼에 보내 편집하고 싶습니다. 다시 그것을 오른쪽 컨테이너로 보내십시오 ....
여기의 버튼으로 무엇을해야합니까 ?? 아니면 다른 방법이 있습니까? 지난 8 시간 동안이 코드로 인해 책상에 머리가 부러졌습니다.
도움이 될만한 정보가 있으면 언제든지 감사하겠습니다.
var cell9 = row.insertCell(7);
var element2 = document.createElement("input");
element2.type = "button";
element2.value = "Edit";
element2.onclick = ?
누군가가 제발 도와주세요 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ass6</title>
<script type="text/javascript">
function addRow(tableID) {
if("" == document.getElementById("crw").value) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
alert(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell3 = row.insertCell(1);
cell3.innerHTML = document.ass6.e1.value;
var cell4 = row.insertCell(2);
cell4.innerHTML = document.ass6.en1.value;
var cell5 = row.insertCell(3);
cell5.innerHTML = document.ass6.ed1.value;
var cell6 = row.insertCell(4);
cell6.innerHTML = document.ass6.et1.value;
var cell7 = row.insertCell(5);
cell7.innerHTML = document.ass6.ep1.value;
if(document.getElementById("eg1").checked) {
var cell8 = row.insertCell(6);
cell8.innerHTML = document.ass6.eg1.value;
}
if(document.getElementById("eg2").checked) {
var cell8 = row.insertCell(6);
cell8.innerHTML = document.ass6.eg2.value;
}
document.getElementsByTagName("INPUT")[0].setAttribute("onclick","");
var cell9 = row.insertCell(7);
var element2 = document.createElement("input");
element2.type = "button";
element2.value = "Edit";
element2.onclick =
}
cell9.appendChild(element2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "Delete";
cell9.appendChild(element3);
//Clearing the form
document.ass6.e1.value = "";
document.ass6.en1.value = "";
document.ass6.ed1.value = "";
document.ass6.et1.value = "";
document.ass6.ep1.value = "";
}
//To update
if(document.getElementById("crw").value) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var i = document.getElementById("crw").value;
alert(i);
table.rows[i].cells["1"].innerHTML = document.getElementById("e1").value;
table.rows[i].cells["2"].innerHTML = document.getElementById("en1").value;
table.rows[i].cells["3"].innerHTML = document.getElementById("ed1").value;
table.rows[i].cells["4"].innerHTML = document.getElementById("et1").value;
table.rows[i].cells["5"].innerHTML = document.getElementById("ep1").value;
document.getElementById("crw").value = i;
//Clearing the form
document.ass6.e1.value = "";
document.ass6.en1.value = "";
document.ass6.ed1.value = "";
document.ass6.et1.value = "";
document.ass6.ep1.value = "";
}
}
//Editing the row
function edt(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
document.getElementById("e1").value = table.rows[i].cells["1"].innerHTML;
document.getElementById("en1").value = table.rows[i].cells["2"].innerHTML;
document.getElementById("ed1").value = table.rows[i].cells["3"].innerHTML;
document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("crw").value = i;
}
}
}catch(e) {
alert(e);
}
}
//Deleting the row
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<div style="margin-top: 200px; margin-left: 150px; width: 300px; background-color: lightblue;">
<form name="ass6">
<table>
<tr>
<td>EmployeeId</td> <td><input type="text" id="e1"></td>
</tr>
<tr>
<td>Employee Name</td> <td><input type="text" id="en1"></td>
</tr>
<tr>
<td>Designation</td> <td><input type="text" id="ed1"></td>
</tr>
<tr>
<td>Team</td> <td><input type="text" id="et1"></td>
</tr>
<tr>
<td>Phone no.</td> <td><input type="text" id="ep1"></td>
</tr>
<tr>
<td>Gender</td> <td>Male <input type="radio" id="eg1" value="Male" name="gen"> Female<input type="radio" id="eg2" value="Female" name="gen"></td>
</tr>
<tr>
<td></td> <td></td>
</tr>
<tr>
<td></td> <td></td>
</tr>
</table>
</form>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
</div>
<div style="margin-top: -200px; margin-left: 500px; width: 480px; background-color: lightgreen;">
<TABLE id="dataTable" width="350px" border="1">
<TR>
<td></td>
<td>ID</td>
<td>Name</td>
<td>Designation</td>
<td>Team</td>
<td>Phone no.</td>
<td>Gender</td>
<td>Action</td>
</TR>
</TABLE>
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<INPUT type="button" value="Edit" onclick="edt('dataTable')" />
<input type="hidden" id="crw">
</div>
</body>
</html>
을 삭제! 내 문제를 해결하려고 생각하고있는 모든 사람들에게 감사드립니다. –