create new table based on another table RRS feed

  • Question

  • User-1634604574 posted

    i have this table 


    red           green    blue     black


    small        large      x-large


    A1           A2    

    red,green,blue,black,small,large,x-large,A1,A2 are a checkbox inside each td i want if thease checkboxes (red,green,small,large,A1) are checked create this table for me

    red small A1
    red large A1
    green small A1
    green large A1
    Wednesday, January 23, 2019 7:21 PM

All replies

  • User61956409 posted

    Hi zhyanadil,

    You can refer to the following code sample to achieve the requirement on client side.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <form id="form1" runat="server">
                    <input name="chk_colour0" id="chk_colour_0" type="checkbox" value="red" /><label for="chk_colour_0">red</label>
                    <input name="chk_colour1" id="chk_colour_1" type="checkbox" value="green" /><label for="chk_colour_1">green</label>
                    <input name="chk_colour2" id="chk_colour_2" type="checkbox" value="blue" /><label for="chk_colour_2">blue</label>
                    <input name="chk_colour3" id="chk_colour_3" type="checkbox" value="black" /><label for="chk_colour_3">black</label>
                    <input name="chk_size0" id="chk_size_0" type="checkbox" value="small" /><label for="chk_size_0">small</label>
                    <input name="chk_size1" id="chk_size_1" type="checkbox" value="large" /><label for="chk_size_1">large</label>
                    <input name="chk_size2" id="chk_size_2" type="checkbox" value="x-large" /><label for="chk_size_2">x-large</label>
                    <input name="chk_weight0" id="chk_weight_0" type="checkbox" value="A1" /><label for="chk_weight_0">A1</label>
                    <input name="chk_weight1" id="chk_weight_1" type="checkbox" value="A2" /><label for="chk_weight_1">A2</label>
                <input id="btnok" type="button" value="GenerateTable" onclick="GenerateTable_func();" />
        function GenerateTable_func() {
            if (!$("input[id^='chk_colour']").is(":checked")) {
                alert("please select colour!");
            if (!$("input[id^='chk_size']").is(":checked")) {
                alert("please select size!");
            if (!$("input[id^='chk_weight']").is(":checked")) {
                alert("please select weight!");
            var result = [];
            $("input[id^='chk_colour']:checked").each(function (index, el) {
                var color = $(el).val();
                var size = "";
                var weight = "";
                $("input[id^='chk_size']:checked").each(function (index, el) {
                    size = $(el).val();
                    $("input[id^='chk_weight']:checked").each(function (index, el) {
                        weight = $(el).val();
                        result.push({ color, size, weight });

    Test Result:

    With Regards,

    Fei Han

    Thursday, January 24, 2019 1:57 AM
  • User-1634604574 posted

    i have table not form

    Thursday, January 24, 2019 6:33 AM
  • User61956409 posted

    Hi zhyanadil,

    i have table not form

    Do you mean that your checkbox(es) are in a table structure, not inside form element? the code that I shared is just for your reference, you can refer to it to implement same functionality based on your actual html content.

    With Regards,

    Fei Han

    Tuesday, January 29, 2019 7:14 AM