0

I created a table using javascript function as show below. enter image description here

When I click on Add Row then the javascript function gets activated and it creates rows of textboxes. And the code is

function addRow() {
    var table = document.getElementById('my_table'); //html table
    var rowCount = table.rows.length; //no. of rows in table
    var columnCount = table.rows[0].cells.length; //no. of columns in table          
    var row = table.insertRow(rowCount); //insert a row            

    var cell1 = row.insertCell(0); //create a new cell           
    var element1 = document.createElement("input"); //create a new element           
    element1.type = "checkbox"; //set the element type 
    element1.setAttribute('id', 'newCheckbox'); //set the id attribute   
    element1.setAttribute('checked', true); //set checkbox by default checked  
    cell1.appendChild(element1); //append element to cell

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.setAttribute('id', 'newInput'); //set the id attribute
    element2.setAttribute('name', 'sl' + rowCount);
    element2.setAttribute('style', 'width: 50px');
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "textarea";
    element3.setAttribute('rows', '4');
    element3.setAttribute('cols', '40');
    element3.setAttribute('id', 'newInput'); //set the id attribute
    element3.setAttribute('name', 'discription' + rowCount);
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.setAttribute('id', 'newInput'); //set the id attribute
    element4.setAttribute('name', 'quantity' + rowCount);
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.setAttribute('id', 'newInput'); //set the id attribute
    element5.setAttribute('name', 'price' + rowCount);
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("input");
    element6.type = "text";
    element6.setAttribute('id', 'newInput'); //set the id attribute
    element6.setAttribute('name', 'CST' + rowCount);
    element6.setAttribute('style', 'width: 50px');
    cell6.appendChild(element6);

    var element7 = document.createElement("select");
    var optarr = ['vat1', 'vat2', 'vat3', 'vat4', 'vat5', 'vat6'];
    for (var i = 0; i < optarr.length; i++) {
        var opt = document.createElement("option");
        opt.text = optarr[i];
        opt.value = optarr[i];
        opt.className = optarr[i];
        element7.appendChild(opt);
    }
    element7.setAttribute('id', 'vat5'); //set the id attribute 
    element7.setAttribute('name', 'tax' + rowCount);
    element7.setAttribute('value', 'vat5');
    cell7.appendChild(element7);
}

Now i need to replace the option of select tags with checkboxes.I tried using document.createElement("checkbox") but its not working.So how to create checkboxes instead of option.Any help will be appreciated

enter image description here

FIFA oneterahertz
  • 718
  • 2
  • 16
  • 43
  • @JeremyJStarcher See what i need is when i click on "Add Row" function a row will come but that row should consists of select tag and inside select tag i should get checkboxes.If i write in html then it wont add on clicking "AddRow" function – FIFA oneterahertz Jun 03 '16 at 12:57
  • You are not going to get the desired behavior out of the box. the `option` element does not allow for having a checkbox in it. You'll have to write something custom and the link provided is a good start. – Jeremy J Starcher Jun 03 '16 at 12:59

0 Answers0