locked
Allowing HTML Table to append checkbox column. RRS feed

  • Question

  • User-1549556126 posted

    I am appending 3 columns into a table in html however while using the checkbox I need to generate separate id for each of the checkbox to bind the label I am using .each in my ajax success call and using an index variable. however it is not incrementing. Can anyone tell me why I is not incrementing? What could be a solution?

    success: function (response) {
                                $.each(response.message, function (key, value) {
                                    var tr = $("<tr></tr>");
                                    var tbody = $("#tbody");
                                    var arr = value.replace("&#39;", "'").replace("&amp;", "&").split(";");
                                    var i = 0;
                                    $.each(arr, function (i, obj) {
                                        var temp = arr[i].trim().split("=")[1];
                                        td = $("<td></td>");
                                        td.append(temp);
                                        tr.append(td);
                                    })
                                    //DropDownlist for required adjustments
                                    tr.append("<td><select id='ddlReqdAdjustment' class='myddl'> \
                                                <option>keep</option> \
                                                <option>remove</option> \
                                                <option>remove after</option> \
                                            </select> \
                                        </td>");
                                    //Textbox with Validation to allow only integers
                                    tr.append("<td><input type='text' id='xSubDays' class='myText' disabled max='366' min='0' oninput='maxLimit(this)'\
                                                    onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                            || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                        </td >");
    
                                    tr.append("<td style='text-align:center;'><input type='checkbox' class='fakeRadio' id='myChk"+ i +"' value='0'/> \
                                                    <label for='myChk"+i+"'/>\
                                               </td>");
                                    tr.append("<td><input type='date' class='form-control myDate'/></td > ");
                                    tbody.append(tr);
                                    // keep Count of HTML Rows
                                    $("#lblTotalCount").text(tbody.children().length);
                                    i++;
                                    alert(i);
                                });

    Friday, August 30, 2019 6:36 PM

All replies

  • User2103319870 posted

    $.each(arr, function (i, obj) {
                                        var temp = arr[i].trim().split("=")[1];
                                        td = $("<td></td>");
                                        td.append(temp);
                                        tr.append(td);
                                    })//Your each loop end here. Move your checkbox creation code inside the each loop

    I think you are running the code to create checkbox out side of $.each loop. You might consider moving the code to create checkbox inside the loop

    Friday, August 30, 2019 7:14 PM
  • User-474980206 posted

    in following code:

                               $.each(response.message, function (key, value) {
                                    var tr = $("<tr></tr>");
                                    var tbody = $("#tbody");
                                    var arr = value.replace("&#39;", "'").replace("&amp;", "&").split(";");
                                    var i = 0;
     

    i is a local variable. the callback is passed the index, just remove the declare and increment and change to:

                               $.each(response.message, function (i, value) {
                                    var tr = $("<tr></tr>");
                                    var tbody = $("#tbody");
                                    var arr = value.replace("&#39;", "'").replace("&amp;", "&").split(";");
                                   
     


     

    Saturday, August 31, 2019 1:27 AM