html - Javascript multiple dropdown in a table -
i trying insert 3 dropdowns on "onclick" event in single row in top bottom sequence,but instead dropdowns inserted sideways.please me new javascript.
code snippet:
function toggle(id) { var supliers = new array(); var sid = document.getelementbyid(id).checked; var val = document.getelementbyid(id).value; supliers.push(val); if (sid) { var table = document.getelementbyid("mytable"); document.body.appendchild(table); (var = 0; < supliers.length; i++) { var cell = table.insertcell(0); cell.setattribute("id", "mytr"); cell.innerhtml = "<select style='width:53px; margin-top: -5px' name='" + 'drop18' + "' class='smalltext' content='' onchange='fnchange(18);'> " + "<option value='-1'>select</option>" + "<option value='7'>yes</option>" + "<option value='8'>no</option>" + "</select>"; var cell1 = table.insertcell(1); cell1.innerhtml = "<select style='width:53px; margin-top: -10px' name='" + 'drop18' + "' class='smalltext' content='' onchange='fnchange(18);'> " + "<option value='-1'>select</option>" + "<option value='7'>yes</option>" + "<option value='8'>no</option>" + "</select>"; var cell2 = table.insertcell(2); cell2.innerhtml = "<select style='width:53px; margin-top: -12px' name='" + 'drop18' + "' class='smalltext' content='' onchange='fnchange(18);'> " + "<option value='-1'>select</option>" + "<option value='7'>yes</option>" + "<option value='8'>no</option>" + "</select>"; } } }
<input type="checkbox" id="suppliera" onclick="toggle(id)"> <input type="checkbox" id="supplierb" onclick="toggle(id)"> <table style="border: 1px solid #000000; height: 250px;"> <tr id="mytable"></tr> </table>
basically have add them new table rows using insertrow()
. suggest moving mytable
class table itself. that's result:
function toggle(id) { var supliers = new array(); var sid = document.getelementbyid(id).checked; var val = document.getelementbyid(id).value; supliers.push(val); if (sid) { var table = document.getelementbyid("mytable"); var row = table.insertrow(0); document.body.appendchild(table); (var = 0; < supliers.length; i++) { var cell = row.insertcell(0); cell.setattribute("id", "mytr"); cell.innerhtml = "<select style='width:53px; margin-top: -5px' name='" + 'drop18' + "' class='smalltext' content='' onchange='fnchange(18);'> " + "<option value='-1'>select</option>" + "<option value='7'>yes</option>" + "<option value='8'>no</option>" + "</select>"; var cell1 = row.insertcell(1); cell1.innerhtml = "<select style='width:53px; margin-top: -10px' name='" + 'drop18' + "' class='smalltext' content='' onchange='fnchange(18);'> " + "<option value='-1'>select</option>" + "<option value='7'>yes</option>" + "<option value='8'>no</option>" + "</select>"; var cell2 = row.insertcell(2); cell2.innerhtml = "<select style='width:53px; margin-top: -12px' name='" + 'drop18' + "' class='smalltext' content='' onchange='fnchange(18);'> " + "<option value='-1'>select</option>" + "<option value='7'>yes</option>" + "<option value='8'>no</option>" + "</select>"; } } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="suppliera" onclick="toggle(id)"> <input type="checkbox" id="supplierb" onclick="toggle(id)"> <table id="mytable" style="border: 1px solid #000000; height: 250px;"> <tr></tr> </table>
Comments
Post a Comment