javascript - HTML - Adding Rows for Multiple Tables -
as below codes shows multiples of tables add/edit/delete functions. have function of adding rows each , every table. in codes, have done first table , rest of tables.
need in this. note: had removed of codes due exceed of code counts.
please ignore passparameters() , getparameterbyname(). adding row function in add_row() function @ end of codes.
window.onload = passparameters; //function update "showdata" div url querystring parameter values function passparameters() { var product = getparameterbyname("product"); var profile = getparameterbyname("profile"); if (product != null && profile != null) { var data = "<b>product in test : </b> " + product + "    <b>profile in test : </b> " + profile; document.getelementbyid("showdata").innerhtml = data; } } //get url parameter value function getparameterbyname(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new regexp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeuricomponent(results[2].replace(/\+/g, " ")); } function alertfunc() { alert("thank ! changes have been saved."); } function edit_row(no) { document.getelementbyid("edit_button" + no).style.display = "none"; document.getelementbyid("save_button" + no).style.display = "block"; var name = document.getelementbyid("name_row" + no); var value = document.getelementbyid("qty" + no); var name_data = name.innerhtml; var value_data = value.innerhtml; name.innerhtml = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>"; value.innerhtml = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>"; } function save_row(no) { var name_val = document.getelementbyid("name_text" + no).value; var value_val = document.getelementbyid("value_text" + no).value; document.getelementbyid("name_row" + no).innerhtml = name_val; document.getelementbyid("qty" + no).innerhtml = value_val; document.getelementbyid("edit_button" + no).style.display = "block"; document.getelementbyid("save_button" + no).style.display = "none"; } function delete_row(no) { document.getelementbyid("row" + no + "").outerhtml = ""; } function add_row() { var new_name = document.getelementbyid("new_name").value; var new_value = document.getelementbyid("new_value").value; var table = document.getelementbyid("data_table"); var table_len = (table.rows.length) - 1; var row = table.insertrow(table_len).outerhtml = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>"; document.getelementbyid("new_name").value = ""; document.getelementbyid("new_value").value = ""; }<!doctype html> <html> <head> <link rel="stylesheet" href="testpoint.css"> </head> <body> <div id="showdata" align="center"></div> <div id="wrapper"> <form id="radioform" method="get" align="center"> <table style="width:80% table-layout:fixed" align="center"> <h3 align="center"> <b>initial (on arrival)</b> </h3> <table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5> <tr> <th>test points</th> <th colspan="4">cycle-time</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> <td></td> </tr> <tr id="row1"> <label id="group1"> <!--label used control respective group of radio buttons--> <td id="name_row1">initial (on arrival)</td> <!--the input box in 'value' column set below--> <td class="cent"><input type="number" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td> <!--the check boxes of 'yes' , 'no' created below--> <td class="cent"><input type="radio" name="group1" value="yes" id="yes1"></td> <td class="cent"><input type="radio" name="group1" value="no" id="no1"></td> <td> <input type="button" id="edit_button1" value="edit" class="edit" onclick="edit_row('1')"> <input type="button" id="save_button1" value="save" class="save" onclick="save_row('1')"> <input type="button" value="delete" class="delete" onclick="delete_row('1')"> </td> </label> </tr> <tr id="row2"> <label id="group2"> <td id="name_row2">drop test (portable only)</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group2" value="yes"></td> <td class="cent"><input type="radio" name="group2" value="no"></td> <td> <input type="button" id="edit_button2" value="edit" class="edit" onclick="edit_row('2')"> <input type="button" id="save_button2" value="save" class="save" onclick="save_row('2')"> <input type="button" value="delete" class="delete" onclick="delete_row('2')"> </td> </label> </tr> <tr id="row3"> <label id="group3"> <td id="name_row3">power test (mobile only)</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group3" value="yes"></td> <td class="cent"><input type="radio" name="group3" value="no"></td> <td> <input type="button" id="edit_button3" value="edit" class="edit" onclick="edit_row('3')"> <input type="button" id="save_button3" value="save" class="save" onclick="save_row('3')"> <input type="button" value="delete" class="delete" onclick="delete_row('3')"> </td> </label> </tr> <tr id="row4"> <label id="group4"> <td id="name_row4">user interface room</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group4" value="yes"></td> <td class="cent"><input type="radio" name="group4" value="no"></td> <td> <input type="button" id="edit_button4" value="edit" class="edit" onclick="edit_row('4')"> <input type="button" id="save_button4" value="save" class="save" onclick="save_row('4')"> <input type="button" value="delete" class="delete" onclick="delete_row('4')"> </td> </label> </tr> <tr> <td><input type="text" id="new_name"></td> <td class="cent"><input type="text" id="new_value"></td> <td class="cent"><input type="radio" name="group28" value="yes"></td> <td class="cent"><input type="radio" name="group28" value="no"></td> <td class="cent"><input type="button" class="add" onclick="add_row();" value="add row"></td> </tr> </table> <br><br> <h3 align="center"> <b>extreme temperature (cold temp)</b> </h3> <table class="table2" style="width:70%" align="center" id="data_table2" cellspacing=2 cellspacing=5> <tr> <th>test points</th> <th colspan="4">cycle-time</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> </tr> <tr id="row5"> <label id="group5"> <td id="name_row5">ate labview rf testing extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group5" value="yes"></td> <td class="cent"><input type="radio" name="group5" value="no"></td> <td> <input type="button" id="edit_button5" value="edit" class="edit" onclick="edit_row('5')"> <input type="button" id="save_button5" value="save" class="save" onclick="save_row('5')"> <input type="button" value="delete" class="delete" onclick="delete_row('5')"> </td> </label> </tr> <tr id="row6"> <label id="group6"> <td id="name_row6">user interface extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group6" value="yes"></td> <td class="cent"><input type="radio" name="group6" value="no"></td> <td> <input type="button" id="edit_button6" value="edit" class="edit" onclick="edit_row('6')"> <input type="button" id="save_button6" value="save" class="save" onclick="save_row('6')"> <input type="button" value="delete" class="delete" onclick="delete_row('6')"> </td> </label> </tr> <tr id="row7"> <label id="group7"> <td id="name_row7">mic talk internal extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group7" value="yes"></td> <td class="cent"><input type="radio" name="group7" value="no"></td> <td> <input type="button" id="edit_button7" value="edit" class="edit" onclick="edit_row('7')"> <input type="button" id="save_button7" value="save" class="save" onclick="save_row('7')"> <input type="button" value="delete" class="delete" onclick="delete_row('7')"> </td> </label> </tr> <tr id="row8"> <label id="group8"> <td id="name_row8">mic talk external extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group8" value="yes"></td> <td class="cent"><input type="radio" name="group8" value="no"></td> <td> <input type="button" id="edit_button8" value="edit" class="edit" onclick="edit_row('8')"> <input type="button" id="save_button8" value="save" class="save" onclick="save_row('8')"> <input type="button" value="delete" class="delete" onclick="delete_row('8')"> </td> </label> </tr> <tr id="row9"> <label id="group9"> <td id="name_row9">desense test</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group9" value="yes"></td> <td class="cent"><input type="radio" name="group9" value="no"></td> <td> <input type="button" id="edit_button9" value="edit" class="edit" onclick="edit_row('9')"> <input type="button" id="save_button9" value="save" class="save" onclick="save_row('9')"> <input type="button" value="delete" class="delete" onclick="delete_row('9')"> </td> </label> </tr> <tr id="row10"> <label id="group10"> <td id="name_row10">tx stability</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group10" value="yes"></td> <td class="cent"><input type="radio" name="group10" value="no"></td> <td> <input type="button" id="edit_button10" value="edit" class="edit" onclick="edit_row('10')"> <input type="button" id="save_button10" value="save" class="save" onclick="save_row('10')"> <input type="button" value="delete" class="delete" onclick="delete_row('10')"> </td> </label> </tr> <tr id="row11"> <label id="group11"> <td id="name_row11">microphonic test</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td> <td class="cent"><input type="radio" name="group11" value="yes"></td> <td class="cent"><input type="radio" name="group11" value="no"></td> <td> <input type="button" id="edit_button11" value="edit" class="edit" onclick="edit_row('11')"> <input type="button" id="save_button11" value="save" class="save" onclick="save_row('11')"> <input type="button" value="delete" class="delete" onclick="delete_row('11')"> </td> </label> </tr> <tr> <td><input type="text" id="new_name"></td> <td class="cent"><input type="text" id="new_value"></td> <td class="cent"><input type="radio" name="group29" value="yes"></td> <td class="cent"><input type="radio" name="group29" value="no"></td> <td class="cent"><input type="button" class="add" onclick="add_row2();" value="add row"></td> </tr> </table> <br><br> <h3 align="center"> <b>extreme temperature (hot temp)</b> </h3> <table class="table3" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5> <tr> <th>test points</th> <th colspan="4">cycle-time</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> </tr> <tr id="row12"> <label id="group12"> <td>ate labview rf testing extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty12" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group12" value="yes"></td> <td class="cent"><input type="radio" name="group12" value="no"></td> <td> <input type="button" id="edit_button12" value="edit" class="edit" onclick="edit_row('12')"> <input type="button" id="save_button12" value="save" class="save" onclick="save_row('12')"> <input type="button" value="delete" class="delete" onclick="delete_row('12')"> </td> </label> </tr> <tr id="row13"> <label id="group13"> <td>user interface extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty13" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group13" value="yes"></td> <td class="cent"><input type="radio" name="group13" value="no"></td> <td> <input type="button" id="edit_button13" value="edit" class="edit" onclick="edit_row('13')"> <input type="button" id="save_button13" value="save" class="save" onclick="save_row('13')"> <input type="button" value="delete" class="delete" onclick="delete_row('13')"> </td> </label> </tr> <tr id="row14"> <label id="group14"> <td>mic talk internal extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty14" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group14" value="yes"></td> <td class="cent"><input type="radio" name="group14" value="no"></td> <td> <input type="button" id="edit_button14" value="edit" class="edit" onclick="edit_row('14')"> <input type="button" id="save_button14" value="save" class="save" onclick="save_row('14')"> <input type="button" value="delete" class="delete" onclick="delete_row('14')"> </td> </label> </tr> <tr id="row15"> <label id="group15"> <td>mic talk external extreme</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty15" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group15" value="yes"></td> <td class="cent"><input type="radio" name="group15" value="no"></td> <td> <input type="button" id="edit_button15" value="edit" class="edit" onclick="edit_row('15')"> <input type="button" id="save_button15" value="save" class="save" onclick="save_row('15')"> <input type="button" value="delete" class="delete" onclick="delete_row('15')"> </td> </label> </tr> <tr id="row16"> <label id="group16"> <td>desense test</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty16" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group16" value="yes"></td> <td class="cent"><input type="radio" name="group16" value="no"></td> <td> <input type="button" id="edit_button16" value="edit" class="edit" onclick="edit_row('16')"> <input type="button" id="save_button16" value="save" class="save" onclick="save_row('16')"> <input type="button" value="delete" class="delete" onclick="delete_row('16')"> </td> </label> </tr> <tr id="row17"> <label id="group17"> <td>tx stability</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty17" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group17" value="yes"></td> <td class="cent"><input type="radio" name="group17" value="no"></td> <td> <input type="button" id="edit_button17" value="edit" class="edit" onclick="edit_row('17')"> <input type="button" id="save_button17" value="save" class="save" onclick="save_row('17')"> <input type="button" value="delete" class="delete" onclick="delete_row('17')"> </td> </label> </tr> <tr id="row18"> <label id="group18"> <td>microphonic test</td> <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty18" maxlength="4" size="4"/></td> <td class="cent"><input type="radio" name="group18" value="yes"></td> <td class="cent"><input type="radio" name="group18" value="no"></td> <td> <input type="button" id="edit_button18" value="edit" class="edit" onclick="edit_row('18')"> <input type="button" id="save_button18" value="save" class="save" onclick="save_row('18')"> <input type="button" value="delete" class="delete" onclick="delete_row('18')"> </td> </label> </tr> <tr> <td><input type="text" id="new_name"></td> <td class="cent"><input type="text" id="new_value"></td> <td class="cent"><input type="radio" name="group30" value="yes"></td> <td class="cent"><input type="radio" name="group30" value="no"></td> <td class="cent"><input type="button" class="add" onclick="add_row();" value="add row"></td> </tr> </table> <br><br> </table> </form> <br><br> <form align="center"> <div id="button"><button type="button" name="button3" onclick="alertfunc()" class="button button3">save</button></div> </form>
Comments
Post a Comment