Appending the Checkbox to the HTML Table.

Question

User-1549556126 posted

For an HTML Table to allow operations for multiple selection of records it is necessary to have a column of checkboxes. I have created an HTML table in the View of my MVC project, and I am filling the records using a function in controller called FillMembers and then I am appending 3 columns back to back a dropdownlist, a textbox & a checkbox through jQuery. All the columns are getting appended however there is an issue with the checkbox. They are getting plotted on extreme left outside the page. I have created the link to stack overflow displaying the image of the module here. Also, when I added a label for that checkbox, the solution is generating the column of checkbox however the don't seem to be clickable. Is it necessary for a checkbox input tag to always have a dedicated label tag with for attribute referencing to the ids of the checkbox?

This is my HTML table

<div id="ResultGrid">
    <div id="tbl">
        <table class="table table-striped table-hover">
            <thead>
                <tr id="thead" class="reviewsubhead">
                    <th>Member Name</th>
                    <th>Member Type</th>
                    <th>Required Adjustment</th>
                    <th>No. of Day(s)</th>
                    <th>
                        <div class="form-control">
                            <input type="checkbox" id="allcb" onclick="uncheckall()" />
                            <label for="allcb" />
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </div>
</div>

This is my source that connects the controller to my view.

$.ajax({
                        type: "POST",
                        url: "/Group/FillMembers",
                        data: { GroupName: $("#ddlGroup option:selected").text().trim() },
                        success: function (response) {
                            $.each(response.message, function (key, value) {
                                var arr = value.split(";")
                                var tbody = $("#tbody");
                                var tr = $("<tr></tr>")
                                $.each(arr, function (i, obj) {
                                    var temp = arr[i].trim().split("=")[1];
                                    var td = $("<td></td>")
                                    td.append(temp);
                                    tr.append(td);
                                })
                                // DropDownlist for required adjustments
                                tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                            <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' class='form-control' \
                                                onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                        || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                    </td >");
                                tr.append("<td> <div class='form-control'>\
                                                <input type='checkbox'/> \
                                                <label for='chk'/> </div>\
                                           </td>");                                tbody.append(tr);
                            });

I tried various methods of appending checkbox but haven't got any success also I have separate checkbox to acknowledge the updates and mvc is creating a replica of it so it looks like a technical issue in mvc. How can this problem be handled? 

Answer 1

User665608656 posted

Hi vyasnikul,

According to your code, I simulated two pieces of data and the test ran successfully.

Can the data in your other columns be loaded properly?

If the other columns are not loaded properly, the reason should be the problem of the data you returned.

You could use the F12 tool to debug to see if there are any errors alert.

Or could you provide the result data returned for us? This will help us solve your issue more easily.

Here is the example I have made,you could refer to it:

  <script>
        $(function () {
            var tableArray = '[{"tr":"dsa;232"},{"tr":"edw;432f"}]';
            tableArray = JSON.parse(tableArray);
            $.each(tableArray, function (key, value) {
                var arr = value.tr.split(";");
                var tbody = $("#tbody");
                var tr = $("<tr></tr>")
                $.each(arr, function (i, obj) {
                    var temp = arr[i];
                    var td = $("<td></td>")
                    td.append(temp);
                    tr.append(td);
                })
                // DropDownlist for required adjustments
                tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                            <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' class='form-control' \
                                                onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                        || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                    </td >");
                tr.append("<td> <div class='form-control'>\
                                                <input type='checkbox' /> \
                                                <label for='chk'/>select</div>\
                                           </td>"); tbody.append(tr);
            });
        });
    </script>

The result of my work demo:

Best Regards,

YongQing.

Answer 2

User-1038772411 posted

Hi vyanikul,

Try This

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows</title>
<style type="text/css">
    table{
        width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 5px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Peter Parker</td>
                <td>[e-mail]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>

Answer 3

User-1549556126 posted

Are the checkboxes getting clicked? The clicking is not working for me. And still there are two checkboxes getting generated in the form.

https://imgur.com/rRl8r0M

The sample data stored in values from the controller looks like this

displayname=User1; samAccountName=usr1; ObjectGUID=8a3fab53-4c8b-483d-89f0-e26de236a627
displayname=User2; samAccountName=usr2; ObjectGUID=0a3fab53-4c8b-483d-89f0-e26de236a627
displayname=User3; samAccountName=usr3; ObjectGUID=9a3fab53-4c8b-483d-89f0-e26de236a627

Link to my previous thread

Answer 4

User-1549556126 posted

I am facing the checkbox rendering & selection issues however I found the way around by using the radio buttons. 

 tr.append("<td> <div class='form-control'>\
    <input type='radio' class='fakeRadio'/> \
  </td>");

And applied JavaScript function on the button to deselect the members on a particular button click.

function clearRadio() {
            var inputs = document.getElementsByClassName('fakeRadio');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = false;
            }
        }