有个问题,现在通过js向建立动态表格。
我现在有两个input按钮,一个是add element,还有一个是delete element
每当我点击这个add按钮的时候,就自动创建一个表格中的一行中一列,不如第一行的第一列,而不是只创建第一行,
当我在点击add按钮的时候,创建第一行的第二列,一次类推。当创建到第一行第4裂的时候,在点击add按钮的时候就创建第二行第一列这个元素。一次类推,delete按钮则是反之。每次创建时都在表格中有个checkbox这样delete就是删除我所选中的checkbox这样的代码怎么写呢??谢谢各位大虾

解决方案 »

  1.   

    过于抽向,你最少先用html表示一下整个界面。
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <table id="edtable" border="1">
    <tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td></tr>
    </table>
    <input type="button" id="addbtn" value="addCol" />
    <input type="button" id="delbtn" value="delCol" />
    <script type="text/javascript">
    document.getElementById('addbtn').onclick=function(){
    var et=document.getElementById('edtable');
    var row_length=et.rows.length;
    var last_rows_cols=et.rows[row_length-1].cells.length;
    var operation_cols=et.rows[row_length-1];

    if(last_rows_cols == 4){
    //创建tr
    operation_cols=et.insertRow(row_length);
    }
    var newAddCol_index=0
    if(last_rows_cols != 4){
    newAddCol_index = last_rows_cols;
    }

    var newAddCol = operation_cols.insertCell(newAddCol_index);
    newAddCol.appendChild(document.createTextNode("New JS Col"));
    };document.getElementById('delbtn').onclick=function(){
    var et=document.getElementById('edtable');
    var row_length=et.rows.length;
    var last_rows_cols=et.rows[row_length-1].cells.length;

    et.rows[row_length-1].deleteCell(last_rows_cols-1);
    };
    </script>
    </body>
    </html>
      

  3.   

    dom table object
      

  4.   

    谢谢,add函数是想要的结果,delete函数如果里面是checkbox怎么删除选中的checkbox呢??谢谢啦
      

  5.   

    delete函数如果里面是checkbox怎么删除选中的checkbox呢??
    re:
    是删除checkbox?还是checkbox选中的列?
      

  6.   


    删除车checkbox。因为对应table中的每个td都有一个checkbox。
      

  7.   

    对不起,看错了需求
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <table id="edtable" border="1">
    <tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td></tr>
    </table>
    <input type="button" id="addbtn" value="addCol" />
    <input type="button" id="delbtn" value="delCol" />
    <script type="text/javascript">
    document.getElementById('addbtn').onclick=function(){
    var et=document.getElementById('edtable');
    var row_length=et.rows.length;
    var last_rows_cols=et.rows[row_length-1].cells.length;
    var operation_cols=et.rows[row_length-1];

    if(last_rows_cols == 4){
    //创建tr
    operation_cols=et.insertRow(row_length);
    }
    var newAddCol_index=0
    if(last_rows_cols != 4){
    newAddCol_index = last_rows_cols;
    }

    var newAddCol = operation_cols.insertCell(newAddCol_index);
    var cke = document.createElement("input");
    //type
    var cke_Att_t=document.createAttribute("type");
    cke_Att_t.value="checkbox";
    cke.setAttributeNode(cke_Att_t);
    //name
    var cke_Att_n=document.createAttribute("name");
    cke_Att_n.value="cellCK";
    cke.setAttributeNode(cke_Att_n);

    newAddCol.appendChild(cke);
    //newAddCol.appendChild(document.createTextNode("New JS Col"));
    };document.getElementById('delbtn').onclick=function(){
    var et=document.getElementById('edtable');
    //var row_length=et.rows.length;
    //var last_rows_cols=et.rows[row_length-1].cells.length;

    //et.rows[row_length-1].deleteCell(last_rows_cols-1);
    var tdCellCK=et.getElementsByTagName('input');
    for(var i=0;i<tdCellCK.length;i++){
    if(tdCellCK[i].checked){
    //找到该checked所在的td,tr
    var tdCellCK =  tdCellCK[i].parentNode;
    tdCellCK.parentNode.removeChild(tdCellCK);
    }
    }
    };
    </script>
    </body>
    </html>