如何使用JavaScript创建一个动态表格

// 你的 HTML 的 body 中添加如下内容

// 一个 div 用来放生成的 table ； 一个按钮执行 create 

// <div id="div"></div> 

// <input type="button" onclick="create()" /> 

// 以下是 js 方法

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function create() {

        // 使用 $("<table></table>") 生成一个 table

        var tab = $("<table border='1'></table>")

        // 3 行循环3次

        for (var i = 1 i <= 3 i++) {

            // 每次生成一个 <tr></tr>

            var row = $("<tr></tr>")

            // 4 列循环 4 次

            for (var j = 1 j <= 4 j++) {

                // 给 <tr></tr> append（添加）  <td>i行j列</td>

                row.append($("<td>" + i + "行" + j + "列" + "</td>"))

            }

            // 给 <table></table> 每次循环添加上边的 <tr>****</tr>

            tab.append(row)

        }

        // 最后把生成的 <table>***</table> 放到 id=div 的控件中

        $("#div").append(tab)

    }

</script>

①。html有点错，radio的name相同，id不能相同，

②。如果value的值分别写为0和1，要写进表格的值为男和女的话，那么js中还要在判断下

③。如果要在当勾选了复选框后，“删除选中的行”按钮启用，没打勾就一直禁用的话，那js中还得加点内容。

利用楼上的那位改的：

<script type="text/javascript">

function buttonDisplay(){

document.getElementById('del').disabled=false

}

function AddAction()

{

var _table=document.getElementById("studentList")

var _tr=_table.insertRow(-1)

var _td=new Array(5)

for(var i=0i<_td.lengthi++)

{

_td[i]=_tr.insertCell(-1)

}

_td[0].innerHTML="<input type='checkbox' name='ck' value='' onclick='buttonDisplay()'/>"

_td[1].innerHTML=_tr.rowIndex

_td[2].innerHTML=document.getElementById("studentName").value

_td[3].innerHTML=document.getElementById("studentAge").value

var gender = document.getElementsByName('studentSex')

var selectedGenderValue = ''

for(var i = 0i<gender.lengthi++){

if(gender[i].checked){

if(gender[i].value == 1) {

selectedGenderValue = '男'

}else if(gender[i].value == 0){

selectedGenderValue = '女'

}

}

}

_td[4].innerHTML = selectedGenderValue

}

function TableDel()

{

var _table=document.getElementById("studentList")

var cks=document.getElementsByName("ck")

for(var i=cks.length-1i>=0i--)

{

if(cks[i].checked){

_table.deleteRow(cks[i].parentNode.parentNode.rowIndex)

document.getElementById('del').disabled="true"

}

}

}

</script>

---