javascript 动态添加表格行

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>动态增加表格行</... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态增加表格行</title>
<script language="JavaScript">
</script>
</head>
<body>
<div align="center"><b>动态增加表格行</b></div>
<hr width=100% size=1 color=#C0C0C0 noshade />
<form action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<table border="0" width="890" cellpadding="0" cellspacing="0" style="font-size: 9pt;">
<tr align="center">
<th>
姓名
</th>
<th>
年龄
</th>
<th>
性别
</th>
<th>

</th>
</tr>
<tr align="center">
<td>
<input name="studentName" type="text" id="studentName"/>
</td>
<td>
<input name="studentAge" type="text" id="studentAge"/>
</td>
<td>
<input name="studentSex" type="radio" id="studentSex" value="1" checked="true"/>男
<input name="studentSex" type="radio" id="studentSex" value="0"/>女
</td>
<td>
<input name="Add" type="button" id="Add" value="增加到下面的表格" onclick="AddAction()" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br/><hr width=100% size=1 color=#C0C0C0 noshade /><br/>
</td>
</tr>
<tr>
<td align="center">
<table width="890" border="1" bordercolor="#C0C0C0" cellpadding="0" cellspacing="0" id="studentList" style="font-size: 11pt;">
<tr>
<th> </th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<br/><input name="del" type="button" id="del" value="删除选中的行" onclick="TableDel()" disabled="true" />
</td>
</tr>
</table>
</form>
</body>
</html>

这是对上面得要求：
一、点击“增加到下面的表格”按钮，在表格中把输入的“姓名”、“年龄”和“性别”插入表格。
“学号”从1开始自动生成。
表格的第一列是复选框。
当表格中有数据，“删除选中的行”按钮可以点击。
请假哪位高手可以告诉我怎们做吗？展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

虎舞动天
2010-03-14 · 超过25用户采纳过TA的回答

知道答主

回答量：197

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

①。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=0;i<_td.length;i++)
{
_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 = 0;i<gender.length;i++){
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-1;i>=0;i--)
{
if(cks[i].checked){
_table.deleteRow(cks[i].parentNode.parentNode.rowIndex);
document.getElementById('del').disabled="true";
}
}
}
</script>

已赞过 已踩过<

评论收起

百度网友bd57fabd2
推荐于2016-07-02 · TA获得超过721个赞

知道小有建树答主

回答量：1200

采纳率：0%

帮助的人：849万

我也去答题访问个人页

关注

展开全部

本来不想帮写功能的，但看到这xhtml代码还算标准，心情好，帮你写一下了。
<script language="JavaScript">
     function AddAction()
  {
     var _table=document.getElementById("studentList");
  var _tr=_table.insertRow(-1);
  var _td=new Array(5);
  for(var i=0;i<_td.length;i++)
  {
      _td[i]=_tr.insertCell(-1);
  }
      _td[0].innerHTML="<input type='checkbox' name='ck' value='' />";
      _td[1].innerHTML=_tr.rowIndex;
   _td[2].innerHTML=document.getElementById("studentName").value;
   _td[3].innerHTML=document.getElementById("studentAge").value;
   _td[4].innerHTML=document.getElementById("studentSex1").checked?'男':'女';
  }
  function TableDel()
  {
      var _table=document.getElementById("studentList");
      var cks=document.getElementsByName("ck");
   for(var i=cks.length-1;i>-1;i--)
   {
        if(cks[i].checked)_table.deleteRow(cks[i].parentNode.parentNode.rowIndex);
   }
  }
</script>
/*
   最后：(哦，楼下的提醒，忘了这radio的id也要改)
<input name="studentSex" type="radio" id="studentSex1" value="1" checked="true"/>男
<input name="studentSex" type="radio" id="studentSex0" value="0"/>女

“删除选中行”的button要删除disabled="true" 
*/


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript 动态添加表格行

其他类似问题

为你推荐：