jQuery動作表格元素，整體添加與刪除

  <s:form id="workForm" name="workForm" method="post" action="../work.action?method=update" theme="simple"><!-- 隱藏欄位 --><input type="hidden" name="userId" id="userId" value="${loginUser.userId }" /> <table id="workTable" width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">  <s:if test="#request.works!=null&&#request.works.size>0">    <s:iterator value="#request.works" id="work">    <tr id="trfirst">    <td >    <table width="100%">    <tr>    <td width="138">工作時間</td>    <td colspan="3">    <input type="text" name="beginTime" value="${work.beginTime }" class="Wdate"  onclick="WdatePicker()"/>  ~      <input type="text" name="endTime" value="${work.endTime }" class="Wdate"  onclick="WdatePicker()"/>    <input type='button' onclick='deleteLine(this)'value='刪除'  class="job_application" style="float:right"/>    </td>    </tr>    <tr>    <td width="138">公司名稱</td>    <td>    <input type="text" name="company" style="width:330px;" value="${work.company }" />    </td>    </tr>    <tr>    <td width="138">崗位</td>    <td><input type="text" name="station"  style="width:330px;" value="${work.station }" /></td>    </tr>    <tr>    <td width="138">工作描述</td>    <td><input type="text" name="workDetails"  style="width:330px;" value="${work.workDetails }" /></td>    </tr>    </table>    </td>  </tr> </s:iterator>   </s:if>   <s:else>   <tr id="trfirst">    <td >    <table width="100%">    <tr>    <td width="138">工作時間</td>    <td colspan="3">    <input type="text" name="beginTime" class="Wdate"  onclick="WdatePicker()"/>  ~      <input type="text" name="endTime" class="Wdate"  onclick="WdatePicker()"/>    <input type='button' onclick='deleteLine(this)'value='刪除'  class="job_application" style="float:right"/>    </td>    </tr>    <tr>    <td width="138">公司名稱</td>    <td>    <input type="text" name="company" style="width:330px;"/>    </td>    </tr>    <tr>    <td width="138">崗位</td>    <td><input type="text" name="station"  style="width:330px;"/></td>    </tr>    <tr>    <td width="138">工作描述</td>    <td><input type="text" name="workDetails"  style="width:330px;"/></td>    </tr>    </table>    </td>  </tr>   </s:else>   </table>   <div class="clear"></div>   <div align="center" style="margin-top:10px; margin-left:220px;">  <a href="javascript:void(0)" onclick="doSubmit()"><span class="job_application" >儲存簡曆</span></a>  <a href="javascript:void(0);" onclick="addLine()"><span class="job_application" >添加更多工作經曆</span></a>   </div>    </s:form>

function addLine(){var newLine=$("#trfirst").clone();$(newLine.find("input:text")).val("");$("#workTable").append(newLine);$("#workTable>tbody>tr").removeClass("even_green");$("#workTable>tbody>tr:even").addClass("even_green");}function deleteLine(thisLine){//如果工作經曆數量大於1if($("#trfirst table").size()>1){$(thisLine).parent().parent().parent().parent().parent().remove();$("#workTable>tbody>tr").removeClass("even_green");$("#workTable>tbody>tr:even").addClass("even_green");}else{$("#trfirst table input:text").val("");alert("已經全部刪除");}}$("#workTable>tbody>tr:even").addClass("even_green") ;