페이지 : 나는 많은 다른 기능을 사용하여 만든 테이블을 받고 일하고 Demo jsfiddleHTML - 테이블 추가, 행, EditingRow
.
기능 : sortTable은 테이블을 정렬합니다. (작업 중)
기능 : table_new는 새 줄을 가져옵니다. (작업 중)
기능 : table_Cancel은 줄 바꿈을 취소합니다. & 줄 편집. (작업 중)
기능 : 테이블 크기가 클 경우 스크롤 기능이 켜집니다. (Working) (데모에서 CSS보기)
table_add_row, table_edit_row가 제대로 작동하지 않습니다. 또한 table_add_row에서 < FORM> 섹션을 가져 오는 방법을 알아낼 수 없습니다.
PHP> MySQL 데이터베이스에 변경 사항을 제출 한 다음 제출시 테이블을 다시로드합니다.
HTML 섹션 :
<table border="1" id="myTable" class="table recipe-table f_center">
<div class="thead">
<tr>
<th class="tb_head" style="Width:auto; background-color:#e2e0cb;">
<button id="new" onclick="table_new()">New</button>
<button id="Cancel" onclick="table_Cancel()" class="tb_hide">Cancel</button>
</th>
<th class="tb_head tb_hide" style="Width:auto; background-color:#e2e0cb;">id</th>
<th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(2)"><span class="tb_head_a">A</span>
</th>
<th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(3)"><span class="tb_head_a">B</span>
</th>
<th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(4)"><span class="tb_head_a">C</span>
</th>
</div>
<div class="tbody">
<tr class="tb_new" id="table_new">
<!--<form>-->
<td>
<button id="t_new" name="t_new">Submit</button>
</td>
<td class="tb_hide">
<input type="text" id="ID_Edit">
</td>
<td>
<input type="text" id="A_New" class="measurement_size">
</td>
<td>
<input type="text" id="B_New" class="measurement_size">
</td>
<td>
<input type="text" id="C_New" class="measurement_size">
</td>
<!--</form>-->
</tr>
<tr>
<!--<form>-->
<td>
<button id="table_edit_1" onclick="table_edit_row(1)">Edit</button>
<button id="table_submit_1" onclick="table_submit(1)" class="tb_hide">submit</button>
</td>
<td class="tb_hide">1</td>
<td>7</td>
<td>8</td>
<td>9</td>
<!--</form>-->
</tr>
<tr>
<!--<form>-->
<td>
<button onclick="table_edit_row(2)">Edit</button>
<button id="table_submit_2" onclick="table_submit(2)" class="tb_hide">submit</button>
</td>
<td class="tb_hide">2</td>
<td>1</td>
<td>2</td>
<td>3</td>
<!--</form>-->
</tr>
<tr>
<!--<form>-->
<td>
<button onclick="table_edit_row(3)">Edit</button>
<button id="table_submit_3" onclick="table_submit(3)" class="tb_hide">submit</button>
</td>
<td class="tb_hide">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<!--</form>-->
</tr>
</div>
</table>
자바 스크립트 :
function table_new() {
document.getElementById("table_new").style.display = "table-row";
document.getElementById("new").style.display = "none";
document.getElementById("Cancel").style.display = "block";
document.getElementById('A_New').value = '';
document.getElementById('B_New').value = '';
document.getElementById('C_New').value = '';
document.getElementById("ID_Edit").value = '';
}
function table_Cancel() {
document.getElementById("table_new").style.display = "none";
document.getElementById("new").style.display = "block";
document.getElementById("Cancel").style.display = "none";
document.getElementById('A_New').value = '';
document.getElementById('B_New').value = '';
document.getElementById('C_New').value = '';
document.getElementById("ID_Edit").value = '';
var ID, table_name, rowLength;
table_name = document.getElementById("myTable");
rowLength = table_name.rows.length;
for (var i = 1; i < rowLength; i += 1) {
ID = table_name.rows[i].cells[2].innerHTML;
document.getElementById("table_edit_" + ID).style.display = "block";
document.getElementById("table_submit_" + ID).style.display = "none";
}
}
function table_add_row() {
var table_name, row, ID, A, B, C, number_row, temp_number, temp_found, temp_submit;
table_name = document.getElementById("myTable");
number_row = 0;
temp_found = 0;
for (var i = 2, row; row = table_name.rows[i]; i++) {
temp_number = "new_" + number_row;
if (temp_number = table_name.rows[i].cells[1].innerHTML) {
number_row++
i = 2;
}
}
row = table_name.insertRow(2);
ID = document.getElementById("ID_Edit").value
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
temp_number = "new_" + number_row;
temp_submit = "table_submit_" + temp_number;
cell0.innerHTML = '<button id="table_edit_' + temp_found + '" onclick="table_edit_row("' + temp_found + '")">Edit</button><button id="' + temp_submit + '" onclick="table_submit(temp_number)" class="tb_hide">submit</button>';
cell1.innerHTML = temp_found;
cell2.innerHTML = document.getElementById('A_New').value;
cell3.innerHTML = document.getElementById('B_New').value;
cell4.innerHTML = document.getElementById('C_New').value;
table_Cancel()
}
function table_edit_row(x) {
document.getElementById("new").style.display = "none";
document.getElementById("Cancel").style.display = "block";
var ID, A, B, C, temp_A, temp_B, temp_C, table_name, table_value;
table_name = document.getElementById("myTable");
for (var i = 1, row; row = table_name.rows[i]; i++) {
if (table.rows[i].cells[1].innerHTML = x) {
ID = table_name.rows[i].cells[1].innerHTML;
A = table_name.rows[i].cells[2].innerHTML;
B = table_name.rows[i].cells[3].innerHTML;
C = table_name.rows[i].cells[4].innerHTML;
document.getElementById('table_edit_' + ID).style.display = "None";
document.getElementById('table_submit_' + ID).style.display = "block";
table_name.rows[i].cells[2].innerHTML = '<input type="text" id="a_edit" value="' + A + '">';
table_name.rows[i].cells[3].innerHTML = '<input type="text" id="b_edit" value="' + B + '">';
table_name.rows[i].cells[4].innerHTML = '<input type="text" id="c_edit" value="' + C + '">';
}
}
}
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 2; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
페이지 : 가능하면 Demo jsfiddle
더 JQuery와 스크립트, 나는 보통 자바 스크립트를 원하는주세요.
스택 오버플로에 오신 것을 환영합니다! [ask]를 읽으십시오. 핵심 구절 : "검색 및 연구"및 "당신이 직접 해결하지 못하게하는 어려움을 설명하십시오." 그것은 우리가 통과해야 할 코드와 요구 사항들이 많습니다. "올바르게 작동하는 것"이 의미하는 바는 없습니다 ... –
문제는'if (table.rows [i] .cells [1] .innerHTML = x)''table_edit_row'에서. 'table'은 정의되지 않았습니다. 나는 당신이'table_name'을 의미한다고 생각합니다. 또한,'submit_ button '에서 호출 된'table_submit'은 함수가 아닙니다. –