通过按下按钮

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列的表格。