如何用JS实现动态加行~

如何用JS实现动态加行~,第1张

表格部分代码如下:

<table id="testTbl" border=1>

<tr id="tr1">

<td width=6%><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td width=6%><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr bgcolor=#0000FF>

<td width=6%><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

动态添加表行的javascript函数如下:

function addRow(){

//添加一行

var newTr = testTbl.insertRow()

//添加两列

var newTd0 = newTr.insertCell()

var newTd1 = newTr.insertCell()

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">'

newTd2.innerText= '新加行'

}

①。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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/8005402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存