HTML - 表，添加行，EditingRow

頁：Demo jsfiddle HTML - 表，添加行，EditingRow

我就收到了許多不同的功能創建的表工作。

功能：sortTable排序表。（工作）

功能：table_new拉出新行。（工作）

功能：table_Cancel取消新行&編輯行。（工作）

功能：如果表格大，它將打開滾動功能。（Working）（在Demo中查看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腳本如果可能的話。

來源

2017-04-05 John Williams

歡迎來到Stack Overflow！請閱讀[問]。重要短語：「搜索和研究」和「解釋......阻止你自己解決它的任何困難」。這是很多您要求我們通過的代碼和要求，沒有跡象表明什麼「正常工作」意味着... –

您的問題似乎在'if（table.rows [i] .cells [1] .innerHTML = x）'在'table_edit_row'中。 'table'是未定義的。我認爲你的意思是'table_name'。另外，'table_submit'（在您的提交按鈕上調用）不是函數。 –

我看到很多問題。我會繼續解決您的添加行問題。

要開始你沒有提交按鈕做任何事情，以便改變該行此

<button onclick="table_add_row()" id="t_new" name="t_new">Submit</button>

然後改變你的table_add_row功能，這

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; 
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; 
    cell1.innerHTML = document.getElementById('A_New').value; 
    cell2.innerHTML = document.getElementById('B_New').value; 
    cell3.innerHTML = document.getElementById('C_New').value; 

    }

來源

2017-04-05 22:11:36 camccar

非常感謝您的幫助。 –

然後給我一個upvote .... – camccar

我已經想通了，所有會話的並且稍後會發布更改。

來源

2017-04-06 16:27:17

HTML - 表，添加行，EditingRow

回答

相關問題