CODEWITHSUNDEEP
javascript
Joe Park
Joe Park

Reputation: 139

creating table within table by pressing button

I currently have a table and in one of the <td>, I have input type of checkbox. where if user clicks on it, it will create different table. 

<div style="padding-left:170px;">
<table width="80%" border="1" padding-left:50px>  
    <tr>  
        <td>  
            <table border="1" style="float:left"> 
                <th>Portal01</th> 
                <tr>  
                    <td style= "padding:12px;" align="left" >
                    <input type="test0" id = "test0" name="liveDiff"  onchange = "expandService()"> blah_0
                    </td>
                    <td>
                    blah_1
                    </td>
                    <td>
                    blah_2
                    </td>
                </tr>  
           </table>
       </td>
   </tr>
</table>

I have it set up where if user clicks on checkbox next to blah_0, it should create different table within this table. I am not sure if this is possible with JavaScript and if not, what would be alternate way to approach this situation.

Upvotes: 0

Views: 80

Answers (3)

Software Engineer
Software Engineer

Reputation: 3956

Another way is to use appendChild(), here is an example:

function expandService(chkId, tblId, totalRows, totalCols){
    var tbl = document.createElement('table');
    tbl.id = tblId;
    var row, col, spn;
    for(var i=0; i<totalRows; i++){
        row = document.createElement('tr');
        for(var j=0; j<totalCols; j++){
            col = document.createElement('td');
            spn = document.createElement('span');
            spn.innerHTML = 'your-text';
            col.appendChild(spn);
            row.appendChild(col);
        }
        tbl.appendChild(row);
    }
    var chk = document.getElementById(chkId);
    // td is the parent of checkbox
    chk.parentNode.appendChild(tbl);
}

Sample usage:

<input type="checkbox" id="test0" name="liveDiff" onchange="expandService(this.id, 'your-table-id', 5, 4)">

It creates a table with 5 rows and 4 columns.

Upvotes: 2

AlexMA
AlexMA

Reputation: 10202

This is possible with javascript. One potential way to go is to use innerHTML. Use jQuery or just document.getElementByID to select the element that corresponds to your cell and insert a table inside of it. Here is an example fiddle using your code as a base.

<div style="padding-left:170px;">
<table width="80%" border="1" padding-left:50px>  
    <tr>  
        <td>  
            <table border="1" style="float:left"> 
                <th>Portal01</th> 
                <tr>  
                    <td id="foo" style= "padding:12px;" align="left" >
                    <input type="test0" id = "test0" name="liveDiff"> blah_0
                    </td>
                    <td>
                    blah_1
                    </td>
                    <td>
                    blah_2
                    </td>
                </tr>  
           </table>
       </td>
   </tr>
</table>  ​

js:

var makeTable = function(contents){
    return '<table><td>' + contents + '</td></table>'
}

document.getElementById("test0").onchange = function(){
   document.getElementById("foo").innerHTML = makeTable("foo")
}

​

Upvotes: 1

cuzzea
cuzzea

Reputation: 1535

it is possible.

function expandService(){
  document.getElementById('the_id_of_the_td_that_will_contain_the_new_table').innerHTML = 
    '<table><tr>...</tr></table>';
}

Upvotes: 2

Related Questions