Data entry table, looking to add “New cell” button to generate a new row per each time clicked
Question
<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 and 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 and 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 I can give will be in the code pen link.
I designed this project with the intent to add text boxes where the "text fields" are and then where the "new cell" button is placed, I would like that to build another column beneath. If possible for assistance in text box placements or additions to jazz-it-up, open ear to all suggestions!
Thanks
1 answers
solution1
0 ACCPTED 2017-08-15 11:08:30
I have literally just done this. One way of doing it is to use jQuery to append a new row once a certain element has been clicked. Please see code below:
jQuery(document).ready(function(){
var i = 1;
jQuery(".addRow").on('click', function(){
i++;
jQuery('tbody').append('<tr><td><input type="file" name="'+i+'" id="attachment"></td></tr>');
});
});
Please note, you will need to put a Class or ID on the element which will be clicked to add the new row.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.