0

我目前有一张桌子，其中一张<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 实现，如果不能，那么解决这种情况的替代方法是什么。

4

3 回答 3

2

有可能的。

function expandService(){
  document.getElementById('the_id_of_the_td_that_will_contain_the_new_table').innerHTML = 
    '<table><tr>...</tr></table>';
}
于 2012-06-25T18:39:47.337 回答
2

另一种方法是使用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 列的表。

于 2012-06-25T19:18:16.650 回答
1

这可以通过 javascript 实现。一种可能的方法是使用innerHTML。使用 jQuery 或仅document.getElementByID选择与您的单元格对应的元素并在其中插入一个表格。这是一个使用您的代码作为基础的示例小提琴。

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

​</p>

于 2012-06-25T18:40:13.453 回答