通過按下按鈕

Question

在表格內創建表格我有一個表格，並在其中一個<td>，我有輸入類型的複選框。如果用戶點擊它，它會創建不同的表格。

<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> 

我有它設置其中，如果用戶點擊旁邊blah_0的複選框，它應該在此表中創建不同的表。我不確定這是否可以用JavaScript，如果不可以，用什麼方法來處理這種情況。

Answer 1

這是可能的。

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

Answer 2

這是可能的JavaScript。一種可行的方法是使用innerHTML。使用jQuery或只需document.getElementByID來選擇與您的單元格相對應的元素並在其中插入一個表格。以下是使用您的代碼作爲基礎的example fiddle。

<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") 
} 

Answer 3

另一種方法是使用appendChild()，這裏有一個例子：

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); 
} 

使用範例：

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

它創建一個5行4列的表格。