0

現在テーブルがあり、そのうちの1つに<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で可能です。実行する可能性のある方法の1つは、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 に答える