实习日志----4.播放时段参数设置

 由于客户在下发广告时，一则广告可在多个时段播放，这就需要设置多个播放时段的参数。

但在这种情况下，我并不知道用户每次需要下发几个时段，所以前台不能设定死。

因此我要实现这么一个功能，让用户根据自己的需要来动态增加、删除播放时段参数。

而我又不希望用户每增加一次时段就刷新一次，又不想用Ajax，最后采用了JavaScript。

前台我先放下2个text类型的input来表示播放时段起始时间与播放时段结束时间，然后再添加一个button类型的input来添加播放时段，onclick事件触发addTime（），然后按先后顺序生成带有删除功能的一行播放时段。
如图：
前台效果图

点击“添加播放时段”后：


开始我写了这样一段代码：

 1var rownum = 0;
 2function addTime()
 3{         
 4     rownum = rownum + 1;
 5     if(rownum<5){
 6     var newrow = table1.insertRow();
 7     newrow.insertCell(0).innerText = '播放时段'+rownum;
 8     newrow.insertCell(1).innerText = document.getElementById("Tdate").value;
 9     newrow.insertCell(2).innerText = document.getElementById("Tdatee").value;
10     newrow.insertCell(3).innerHTML = "<input type=button value=删除 onclick=deleteTime()>";
11        }
12    else{
13        alert("最多发送4个时段");
14        rownum--;
15        }
16
17}
18function deleteTime()
19{
20 table1.deleteRow(rownum);
21 rownum--;
22}

但是问题来了，删除时候只删除最后一行，不能删除特定行。

解决方法：
删除时候获得obj的tr值
代码如下：

  <tr id="trDisplayBT">
          <td style="height: 22px">&nbsp;播放时段起始时间：<input name="Tdate" type="text" onfocus="new WdatePicker(this,'%h:%m:%s',true,'whyGreen')" maxdate="#F{$('Tdatee').value}" onpicked="$('Tdatee').onfocus()" class="limit2" id="Tdate" value="<%=Tdate%>" size="10" maxlength="8"></td>
  </tr>
  <tr id="trDisplayET">         
        <td style="height: 22px">&nbsp;播放时段结束时间：<input name="Tdatee" type="text" onfocus="new WdatePicker(this,'%h:%m:%s',true,'whyGreen')" mindate="#F{$('Tdate').value}" class="limit2" id="Tdatee" value="<%=Tdatee%>" size="10" maxlength="8"></td>
  </tr>
  <tr>
         <td><input type=button style="width: 90px" id="buAdd" name="cmd" value="添加播放时段" onclick=addTime() ></td>
  </tr>
    <TABLE BORDER="1" id=table1>   
  <TR>
    <TD style="width: 180px; height: 18px;">播放时段</TD>
    <TD id="tdTdate" style="width: 180px; height: 18px;">开始时间</TD>
    <TD id="tdTdatee" style="width: 180px; height: 18px;">结束时间</TD>
    <TD style="width: 180px; height: 18px;">删除</TD>
  </TR>
    </TABLE >


<script language="javascript"> 

var rownum = table1.rows.length-1;
function addTime()
{    
     rownum = rownum + 1;
     if(rownum<5){
     var newrow = table1.insertRow();
     newrow.insertCell(0).innerText = '播放时段'+rownum;
     newrow.insertCell(1).innerText = document.getElementById("Tdate").value;
     newrow.insertCell(2).innerText = document.getElementById("Tdatee").value;
     newrow.insertCell(3).innerHTML = "<input type=button value=删除 onclick=deleteTime(this.parentNode.parentNode)>";
        }
    else{
        alert("最多发送4个时段");
        rownum--;
        }

}
function deleteTime(obj)
{
 for(var i=0;i<table1.rows.length;i++)
 {
   if(table1.rows[i]==obj)
    table1.deleteRow(i);
 }
 i--;
 rownum=table1.rows.length-1;

  if(rownum>0)
  {
     for(var j=1;j<table1.rows.length;j++)
    {
     table1.rows[j].cells[0].innerText = '播放时段'+j;
    }
  }

}

</script>