create new table based on another table
Question
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
