javascript - Data entry table, looking to add "New cell" button to generate a new row per each time clicked -
<body> <div id="wrapper"> <!-- page content --> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h1 align="center">controls page</h1> </br> <main> <section id="with-container-example"> <!-- table --> <div class="container"> <div class="row"> <div class="table-responsive"> <!-- table titles --> <table class="table table-hover"> <thead> <tr class="alert-info"> <!-- <button type="button" class="btn" onclick="alert('all information saved!')">save all</button><br></br> --> <input type="button" class="btn" value="save" style="float: right;" onclick="alert('all information saved!')"><br></br> <th>text:</th> <th>~</th> <th>~</th> <th>dropdown</th> <th>dropdown</th> <th>text:</th> <th>text:</th> <th>text:</th> <th> add cell(+) </> </tr> </thead> <!-- tables --> <tbody id="mytable"> <tr> <td>a65.1</td> <td>table cell</td> <td>control <br> conflictin duties , area of responsibilities .......</td> <td align="center"> <select id="selectbasic" name="selectbasic" class="selectpicker"> <option>-</option> <option>yes</option> <option>no</option> </select> </td> <td align="center"> <select id="selectbasic" name="selectbasic" class="selectpicker"> <option>-</option> <option>yes</option> <option>no</option> <option>partially</option> </select> </td> <td>table cell</td> <td>table cell</td> <td>table cell</td> </tr> <tr> <td>2</td> <td>table cell</td> <td>control <br><textarea rows="3" cols="60">conflictin duties , area of responsibilities ....... </textarea></td> <td align="center"> <select id="selectbasic" name="selectbasic" class="selectpicker"> <option>-</option> <option>yes</option> <option>no</option> </select> <td align="center"> <select id="selectbasic" name="selectbasic" class="selectpicker"> <option>-</option> <option>yes</option> <option>no</option> <option>partially</option> </select> </td> <td>table cell</td> <td>table cell</td> <td>table cell</td> </tr> <tr> <td>3</td> <td>table cell</td> <td>table cell</td> <td align="center"> <select id="selectbasic" name="selectbasic" class="selectpicker"> <option>-</option> <option>yes</option> <option>no</option> </select> <td align="center"> <select id="selectbasic" name="selectbasic" class="selectpicker"> <option>-</option> <option>yes</option> <option>no</option> <option>partially</option> </select> </td> <td>table cell</td> <td>table cell</td> <td>table cell</td> </tr> <tr> the full open code can give in code pen link.
i designed project intent add text boxes "text fields" , "new cell" button placed, build column beneath. if possible assistance in text box placements or additions jazz-it-up, open ear suggestions!
thanks
i have literally done this. 1 way of doing use jquery append new row once element has been clicked. please see code below:
jquery(document).ready(function(){ var = 1; jquery(".addrow").on('click', function(){ i++; jquery('tbody').append('<tr><td><input type="file" name="'+i+'" id="attachment"></td></tr>'); }); }); please note, need put class or id on element clicked add new row.
Comments
Post a Comment