page: demo jsfiddle
i working on getting table created many different features.
function: sorttable sorts table. (working)
function: table_new pulls new line. (working)
function: table_cancel cancels new line & edit line. (working)
feature: if table large, turn on scrolling feature. (working) (view css in demo.)
i unable function: table_add_row, table_edit_row work correctly. in table_add_row, cant figure out how add < form> section imported.
i submitting changes php > mysql database, reloading table on submission.
html section:
<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 script:
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; (var = 1; < rowlength; += 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; (var = 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++ = 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"); (var = 1, row; row = table_name.rows[i]; i++) { if (table.rows[i].cells[1].innerhtml = x) { id = table_name.rows[i].cells[1].innerhtml; = 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="' + + '">'; 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 sorting direction ascending: dir = "asc"; /*make loop continue until no switching has been done:*/ while (switching) { //start saying: no switching done: switching = false; rows = table.getelementsbytagname("tr"); /*loop through table rows (except first, contains table headers):*/ (i = 2; < (rows.length - 1); i++) { //start saying there should no switching: shouldswitch = false; /*get 2 elements want compare, 1 current row , 1 next:*/ x = rows[i].getelementsbytagname("td")[n]; y = rows[i + 1].getelementsbytagname("td")[n]; /*check if 2 rows should switch place, based on direction, asc or desc:*/ if (dir == "asc") { if (x.innerhtml.tolowercase() > y.innerhtml.tolowercase()) { //if so, mark switch , break loop: shouldswitch = true; break; } } else if (dir == "desc") { if (x.innerhtml.tolowercase() < y.innerhtml.tolowercase()) { //if so, mark switch , break loop: shouldswitch = true; break; } } } if (shouldswitch) { /*if switch has been marked, make switch , mark switch has been done:*/ rows[i].parentnode.insertbefore(rows[i + 1], rows[i]); switching = true; //each time switch done, increase count 1: switchcount++; } else { /*if no switching has been done , direction "asc", set direction "desc" , run while loop again.*/ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } page: demo jsfiddle
please no jquery script, want normal java script if possible.
i see lot of problems. i'll go ahead , solve add row problem.
to start don't have submit button doing change line this
<button onclick="table_add_row()" id="t_new" name="t_new">submit</button> then change table_add_row function this
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; } 
Comments
Post a Comment