[Javascript] 不刷新动态改变表格(Table)行数

最新推荐文章于 2024-04-12 11:04:13 发布

IamZhuJun

最新推荐文章于 2024-04-12 11:04:13 发布

阅读量3.6k

点赞数

分类专栏： J2EE 文章标签： javascript table button border function delete

本文链接：https://blog.youkuaiyun.com/IamZhuJun/article/details/300587

版权

J2EE 专栏收录该内容

1 篇文章

订阅专栏

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
var index=1;
/**
* 增加行
  */
function add()
{
     with(document)
     {
             var newRow ;
             var oldRow = new String(all. DyncTable.innerHTML);
             var textHTML='';
             array = oldRow.split('</TR>');
             count = array.length-1;

             for(i=0 ;i<count;i++)
             {
                textHTML+=array[i]+"</TR>";
                if(i==count-1)
                {
     newRow =
                     "<TR><TD>"+(index++)+
                     "</TD><TD><input type='text' name='description'/></TD>"+
                     "<TD><textarea name='suggestion' cols='30' rows='2'></textarea></TD>"+
                     "<TD><P><select name='emergency' size='1'>"+
                     "<option value='0'>None"+
                     "<option value='1'>Low"+
                     "<option value='2'>Medium"+
                     "<option value='3'>Urgent</select></TD>"+
                     // Delete 按钮
                     "<TD style='cursor:hand;text-decoration:underline;' onClick='del()'>delete</TD></TR>";
                     textHTML+=newRow;
                 }
             }
             textHTML+=array[array.length-1];
             all. DyncTable.innerHTML=textHTML;
             array=null;
      //alert(textHTML);
     }
}

/**
* 删除行
  */
function del() {
  var delHTML =event.srcElement.parentElement.innerHTML;
  var textHTML = document.all. DyncTable.innerHTML;
  var newHTML = textHTML.replace(delHTML,"");
  newHTML = newHTML.replace("<TR></TR>","");
  //alert(newHTML);
  document.all. DyncTable.innerHTML = newHTML;
}
</script>
</head>
<body>
<div id=" DyncTable" style="border:0px solid;height:100px">
     <table width="85%" border="1" cellpadding="1" cellspacing="1" bordercolor="#999999">
       <tr bgcolor="#66CCFF">
         <td colspan="3" bgcolor="#EEEEEE"><strong>Dynamic Table</strong></td>
         <td colspan="2" bgcolor="#EEEEEE">
           <div align="right">
             // Add按钮
             <input name="button2" type='button' onClick='add();' value='Add' class = "button">
           </div>
         </td>
       </tr>
       
       <TR bgcolor="#FFCC66">
         <TH><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Column1</font></strong></div></TH>
         <TH><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Column2</font></strong></div></TH>
         <TH><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Column3</font></strong></div></TH>
         <TH><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Column4</font></strong></div></TH>
         <TH><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Column5</font></strong></div></TH>
       </TR>
       
     </TABLE>
</div>
</body>
</html>