c# - Need to create textboxes dynamically without loosing the style -
in form, have textbox integer can placed , clicking button next it, should dynamically create many textboxes table. jquery code is:
$("#contentplaceholder1_lnkbtnnoofitems").click(function () { $(".white-table-view-block").removeclass("hide"); $("#table-id-name").removeclass("hide"); $("#table-id-name").each(function () { var numbrow = $("#txtnoofitems").val(); var htmlvar = ''; (i = 0; < numbrow; i++) { htmlvar += '<tr>'; htmlvar += '<td class="blanck-space"> </td>'; htmlvar += '<td class="item-number"><input type="text" id="item_number_input' + + '" class="form-control" placeholder="number" /></td>'; htmlvar += '<td class="item-description"><input type="text" id="item_des_input' + + '" class="form-control" placeholder="number" /></td>'; htmlvar += '<td class="item-quantity"><input type="text" id="item_quantity_input' + + '" class="form-control" placeholder="pieces" /></td>'; htmlvar += '<td class="item-cost"><input type="text" id="item_cost_input' + + '" class="form-control" placeholder="$" /></td>'; htmlvar += '<td class="item-value"><input type="text" id="item_total_input' + + '" class="form-control" placeholder="$" /></td>'; htmlvar += '<td class="item-action"><a href="javascript:;" id="item_action_btn' + + '" class="delet-icon"><img src="images/icon-delete.png" alt="" /></a></td>'; htmlvar += '</tr>'; } $('.tbody-content').append(htmlvar); $(".delet-icon").click(function () { $(this).parents("tr").remove(); }); }); });the textbox , link button code is:
<div class="col-md-4 col-lg-2"> <div class="number-of-item-block"> <div class="row"> <div class="col-md-12"><asp:label runat="server" id="lblnoofitems" text="no. of item rows"></asp:label></div> <div class="col-md-12"> <asp:textbox runat="server" class="form-control" id="txtnoofitems" placeholder="#" ></asp:textbox> <asp:linkbutton runat="server" id="lnkbtnnoofitems" class="btn btn-dark-blue"><i class="glyphicon glyphicon-plus"></i></asp:linkbutton> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> </div> </div> </div>but text boxes should generated controls need working on server side. please tell me how can this. did not before , have no idea how them now.
thanks,
deepak
i think may out..
$("#aaddmorelicense").click(function () { addmorekeyword(); return false; }); //delete added row or unwanted row function deletelicense($adelete) { if ($(".tbl-keyword tbody tr").length > 1) { $($adelete.closest("tr")).remove(); } allowdeletefunctionality(); } function allowdeletefunctionality() { debugger if ($(".tbl-keyword tbody tr").length === 2) { $(".tbl-keyword tbody tr").each(function () { if ($(this).attr("class") !== "hidden for-clone") { $(this).find(".adelete-keyword").addclass("hidden"); } }); } else { $(".tbl-keyword tbody tr").each(function () { if ($(this).attr("class") !== "hidden for-clone") { $(this).find(".adelete-keyword").removeclass("hidden"); } }); } } addmorekeyword(); function addmorekeyword() { var rowindex = $(".tbl-keyword tbody tr").length; var tritems = $(".tbl-keyword tbody tr").eq(0).clone(true); tritems.removeclass("hidden for-clone"); tritems.addclass("keyword-row-" + rowindex); $("#txtsearchkeyword", tritems).val(""); $("#lblsrno", tritems).addclass("keyword-lbl-" + rowindex); $("#lblsrno", tritems).text(rowindex); $("#txtsearchkeyword", tritems).addclass("keyword-type-" + rowindex); $("#ddldomainrank1", tritems).addclass("keyword-no-" + rowindex); $(".tbl-keyword tbody").append(tritems); allowdeletefunctionality(); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" /></script> <div class="main-box" style="border: none; box-shadow: none"> <div class="main-box-body clearfix scroll"> <div class="col-lg-12" style="margin: 10px 0px;"> <span class="mandatory" id="spnlbl" style="font-weight: bold; font-size: 12pt">*</span> </div> <table class="table tbl-keyword" cellpadding="0" cellspacing="0"> <thead> <tr> <th style="width: 3% !important;"> keyword sr# </th> <th style="width: 80% !important;"> <span>keyword</span> <span style="color: red">*</span> </th> <th style="width: 15% !important;"> <span >rank</span> <span style="color: red">*</span> </th> <th style="width: 3% !important;"> <span> linked hra</span> </th> <th style="width: 3% !important;"> delete </th> </tr> </thead> <tbody> <tr class="hidden for-clone"> <td style="width: 3%"> <span id="lblsrno" ></span> </td> <td style="width: 80% !important; padding: 5px 8px;" class="td"> <input type="hidden" id="hdfartvideoid" /> <input type="hidden" id="hdftype" /> <input type="text" id="txtsearchkeyword" cssclass="form-control" autocompletetype="disabled" /> <div class="ac_keywordresults hidden" style="position: absolute; width: 300px; max-height: 184px; overflow: auto;"> </div> </td> <td style="width: 15% !important; padding: 5px 8px;"> <select id="ddldomainrank1" cssclass="form-control ddlrank" style="padding: 6px 8px; float: left"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </td> <td style="width: 3% !important; text-align: center"> <a onclick="linkedhra(this);" class="alcontent-keyword" style="color: #8bc34a !important; font-size: 25px" href="javascript:void(0);" title="linked content" target="_blank"><i class="glyphicon glyphicon-list-alt"></i></a> </td> <td style="width: 3% !important; text-align: center;"> <a onclick="deletelicense(this);" class="adelete-keyword" style="color: #8bc34a !important;" href="javascript:void(0);" title="delete"><i class="glyphicon glyphicon-trash"></i></a> </td> </tr> </tbody> </table> <div class="col-md-12 form-group"> <a href="javascript:void(0);" id="aaddmorelicense" class="lnk-morelic pull-right"><i class="glyphicon glyphicon-plus"></i> add keywords</a> </div> </div> </div>
Comments
Post a Comment