HTML TABLE批量添加行与删除行

<table class="page_datalist" id="batch_add_table">
        <thead>
            <tr>
                <th  width="3%">日期</th>
                <th scope="col" width="2%">开始时间</th>
                <th scope="col" width="2%">结束时间</th>
                <th scope="col" width="10%">议题</th>
                <th scope="col" width="8%">地点</th>
                <th scope="col" width="20%">内容</th>
                <th scope="col" width="8%">操作</th>
            </tr>
        </thead>

        <tbody>
         <tr>

          <!-- 日期 -->
             <td align="left">
             <input id="date" type="text"
                                name="date" class="Wdate"
                                onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
                                value=""
                                readonly="readonly" />
         </td>

         <!-- 开始时间 -->
          <td align="left">
                        <input id="startTime"
                        type="text" name="startTime" class="Wdate"
                        value=""
                        onfocus="WdatePicker({dateFmt:'HH:mm'})"
                        readonly="readonly" />
                    </td>

         <!-- 结束时间 -->
         <td align="left">
                            <input id="endTime" type="text"
                        name="endTime" class="Wdate"
                        value=""
                        onfocus="WdatePicker({isShowClear:false,dateFmt:'HH:mm',minDate:'#F{$dp.$D(\'startTime\')||\'2020-10-01\'}'})"
                        readonly="readonly" />
        </td>

          <!-- 议题 -->
       <td align="left">
                <input id="topic" type="text"
                        value="" maxlength="128" />
            </td>

         <!-- 地点 -->
      <td align="left">
      <input id="location" type="text"
                        value=""  maxlength="128" />
      </td>

    <!-- 内容 -->
    <td align="left">
    <textarea  id="description" rows="1000" cols="40"
                            name="description" style="height:80px;"></textarea>
    </td>

     <td align="center">
                <a href="javascript:void(0);" onClick="insertRow(this);">添加</a>
                <a href="javascript:void(0);" onClick="delCurrentRow(this);">删除</a>
     </td>

       </tr>

  </tbody>
    </table>

 

 

对应的JS函数:

/**
    *删除当前行
    */
    function delCurrentRow(obj){
        if(confirm("确定删除当前议程?")){
             if(document.all.batch_add_table.rows.length>2){
                 var clickedRow=obj;
                 while(clickedRow.tagName!="TR"){
                     clickedRow=clickedRow.parentNode;
                 }
                 clickedRow.parentNode.removeChild(clickedRow);
             }else{
                 alert("此行不能进行删除！");
                 return;
             }
        }
    }

    /**
    *复制当前行并插入到表格中去
    */
    function insertRow(obj){
        //获取当前表格batch_add_table的行总数
        var rowNum=document.all.batch_add_table.rows.length;
        //获取当前表格的行并克隆
        var newrow = document.all.batch_add_table.rows[rowNum-1].cloneNode(true);
        //新行的列数
        var colNum=newrow.cells.length;
        //获取当前行并进行递归循环操作找到当前行的节点
        var oldTr=obj;
        while(oldTr.tagName!="TR"){
            oldTr=oldTr.parentNode;
        }
        //var oldTr = $("tr:last", $("#batch_add_table"));
        //var oldTr = $("tr:last", $("#batch_add_table"));
        //通过JQUERY选择器来获取对应的控件的值
        var date= $("#date", oldTr).val();
        var startTime= $("#startTime", oldTr).val();
        var endTime = $("#endTime", oldTr).val();

        if(date==''){
            alert('请选择议程日期！');
            return ;
        }
        if(startTime==''){
            alert('请选择议程开始时间！');
            return ;
        }
        if(endTime==''){
            alert('请选择议程结束时间！');
            return ;
        }

        $("#startTime", newrow).val(endTime);
        //复制当前行到表格
        document.all("batch_add_table").appendChild(newrow);
    }

 

 

彰显JQUERY选择器的优势的几句:

//var oldTr = $("tr:last", $("#batch_add_table"));
//var oldTr = $("tr:last", $("#batch_add_table"));
//通过JQUERY选择器来获取对应的控件的值
var date= $("#date", oldTr).val();
var startTime= $("#startTime", oldTr).val();
var endTime = $("#endTime", oldTr).val();