javascript - Iterate through table and create an array in js/jquery -
i want iterate through dynamically created table , create array of elements project name, client name, , field rate @ each index populate , pass through json object
here how table looks:
<table id="project-table" class="table table-striped table-hover"> <thead> <tr> <th>project name</th> <th>client name</th> <th>field rate</th> <th>delete row</th> </tr> </thead> <tbody> <%--jquery append our data here... --%> </tbody> </table> <button type="button" onclick="projecttable()" class="btn btn-primary">add row</button> function projecttable() { projectrows = projectrows + 1; var $tbody = $('#project-table').find('tbody'); var $id = $(""); var $tr = $("<tr>"); $id.append( "<hidden id='projectid'/>" + "<hidden id='projectversion'/>" ); $tr.append( "<td>" + "<input class='form-control' id='inputprojectname' placeholder='project name' type='text'>" + "</td>" + "<td>" + "<input class='form-control' id='inputclientname' placeholder='client name' type='text'>" + "</td>" + "<td>" + "<input class='form-control' id='inputrate' placeholder='rate' type='text'></td>" + "<td>" + "<input type='button' value='delete' onclick='deleterow(this)'>" + "</td>"); $tbody.append($id); $tbody.append($tr);}
projecttable() called each time click add new row button. want able depending on how many rows have been created create array containining info each of rows so:
projectlist: [ { id: projectid, version: projectversion, projectname: projectname, clientname: clientname, fieldrate: fieldrate }
but multiple objects have tried few different loops haven't worked me.
you selecting tr
, each of select input
elements build data.
some issues in current code:
- you cannot have static
id
property values in rows,id
values must unique - the custom
hidden
element cannot child oftbody
. don't see how need element.
i have altered other things in code make more jquery-like:
function projecttable() { $('#project-table>tbody').append( $("<tr>").append( $("<td>").append($("<input>").addclass("form-control") .attr({placeholder: "project name", type: "text"})), $("<td>").append($("<input>").addclass("form-control") .attr({placeholder: "client name", type: "text"})), $("<td>").append($("<input>").addclass("form-control") .attr({placeholder: "rate", type: "text"})), $("<td>").append($("<input>").addclass("form-control delete") .attr({type: "button"}).val("delete")) ) ); } $(document).on("click", ".delete", function () { $(this).closest("tr").remove(); }); $('#get').click(function () { var data = $.map($('#project-table>tbody>tr'), function (tr) { var $inp = $('input', tr); return { project: $inp.eq(0).val(), client: $inp.eq(1).val(), rate: $inp.eq(2).val(), }; }); $('#jsonout').text(json.stringify(data, null, 2)); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="project-table" class="table table-striped table-hover"> <thead> <tr> <th>project name</th> <th>client name</th> <th>field rate</th> <th>delete row</th> </tr> </thead> <tbody> </tbody> </table> <button type="button" onclick="projecttable()" class="btn btn-primary">add row</button> <button type="button" id="get" class="btn btn-primary">get json</button> <pre id="jsonout"></pre>
wiki
Comments
Post a Comment