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

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

Answer 3

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

按下按钮在表格中创建表格

3 个答案: