locked
create new table based on another table RRS feed

  • Question

  • User-1634604574 posted

    i have this table 

    colour

    red           green    blue     black

    size

    small        large      x-large

    weight

    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">
        <title></title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div>
                    <h2>Colour</h2>
                    <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>
    
                    <h2>Size</h2>
                    <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>
    
    
                    <h2>Weight</h2>
                    <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>
                </div>
                <input id="btnok" type="button" value="GenerateTable" onclick="GenerateTable_func();" />
            </div>
        </form>
    </body>
    </html>
    <script>
        function GenerateTable_func() {
            if (!$("input[id^='chk_colour']").is(":checked")) {
                alert("please select colour!");
                return;
            }
    
            if (!$("input[id^='chk_size']").is(":checked")) {
                alert("please select size!");
                return;
            }
    
            if (!$("input[id^='chk_weight']").is(":checked")) {
                alert("please select weight!");
                return;
            }
    
            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 });
                    })
                });
            });
    
            //console.log(JSON.stringify(result));
            alert(JSON.stringify(result));
        }
    </script>

    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