動態添加表格一行(javascript)

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<%@ page language="java" import="java.util.*,com.page.wash.giveclothing.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>添加表格資訊</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<script type="text/javascript">

function AddRow()
{
//添加一行
var i =tab1.rows.length;
var Nam="'div1'";
var Cod="fuJ"+i;
var newTr = tab1.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//設定列內容和屬性
newTd0.innerHTML = '<input type="checkbox" id="box1" onClick="GetRow()"/ /><input type="hidden" name="fuJ" id='+Cod+' />';
newTd1.innerHTML = " 衣服尺碼";
newTd2.innerHTML = " 衣服花色";
newTd3.innerHTML = " 處理類型";
}
function DelRow()
{
//刪除一行
var shu=0;
var cheCou=document.all("box1");
   for(var i=0;i<cheCou.length;i++)
   {
    if (cheCou[i].checked==true)
    {
      shu++;
    }
   }
   if(shu==cheCou.length)
   {
     alert('最少要添加一件衣服');
     return;
   }
   else if(shu==0)
   {
     alert('請選擇你要刪除的資訊');
     return;
   }
   else if(shu==1)
   {
     for(var i=0;i<cheCou.length;i++)
     {
       if(cheCou[i].checked==true)
       {
        tab1.deleteRow(i+1);
       }
     }
   }
   else if(shu>1)
   {
     for(var a=0;a<shu;a++)
     {
         for(var i=0;i<cheCou.length;i++)
      {
        if(cheCou[i].checked==true)
        {
         tab1.deleteRow(i+1);
         break;
        }
      }
     }
   }
}
function GetRow()
{
//獲得行索引
//兩個parentElement分別是TD和TR喲，rowIndex是TR的屬性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}
</script>
</head>
<body>
<form name="form1" action="${pageContext.request.contextPath}/giveClothing.do?method=FuJiaFei" method="post"   >
<center>
    <fieldset>
     <legend><strong>動態添加一行表格</strong></legend>
     <input type=hidden id="hid" name="hid"/ />
<table id="tab1" align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">
      <thead>
    <tr>
     <th align="center" width="10%">選擇</th>
     <th align="center" width="15%">衣服尺碼</th>
     <th align="center" width="15%">衣服花色</th>
     <th align="center" width="15%">處理類別</th>
    </tr>
   </thead>
               <tr >
     <td><input type=checkbox id="box1" onClick="GetRow()" />
         <input type="hidden" name="fuJ" id="fuJ1" />
     </td>
     <td> 衣服尺碼</td>
     <td> 衣服花色</td>
     <td> 處理類別</td>
            </tr>

       </table>
       <table align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">
       <tr>
         <td align="right">
       <input type="button" name="Submit" value="增加一行" onclick="javascript:AddRow();" />
          <input type="button" name="Submit" value="刪除一行" onclick="javascript:DelRow();" />
         </td>
      </tr>
   </table>
</form>
</body>

</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

動態添加表格一行(javascript)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support