0
ページ：私は多くの異なった機能で作成した表を取得に取り組んでいますDemo jsfiddleHTML - 表、追加の行、EditingRow
。
機能：sortTableはテーブルをソートします。 （作業中）
機能：table_newは新しい行をプルアップします。 （作業中）
機能：table_Cancelは、新しい行をキャンセルします。&行を編集します。 （作業中）
機能：テーブルが大きい場合、スクロール機能が有効になります。 （作業中）（デモで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>
Javaスクリプト：
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のスクリプト可能な場合、私は通常のJavaスクリプトをしたいです。
ようこそスタックオーバーフロー！ [ask]をお読みください。重要なフレーズ：「検索と研究」と「あなたがそれを自分で解決することを妨げた困難を説明する」これは多くのコードと要件があり、私たちには "正しく動作する"という意味がないことを示していません。 –
問題は 'if（table.rows [i] .cells [1] .innerHTML = x） 'を' table_edit_row'に追加します。 'table'は未定義です。私はあなたが 'table_name'を意味すると思います。また、（あなたの送信ボタンで呼び出される） 'table_submit'は関数ではありません。 –