jquery 追加tr和删除tr示例代码

复制代码 代码如下:

  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

  <script>

  $(function(){

  $("#getAtr").click(function(){

  $str='';

  $str+="<tr align='center'>";

  $str+="<td><input type='text' name='advTitle[]'/></td>";

  $str+="<td><input type='file' name='img[]' /></td>";

  $str+="<td><input type='text' name='advContent[]' /></td>";

  $str+="<td><input type='text' name='advSource[]' /></td>";

  $str+="<td><input type='text' name='advAuthor[]' /></td>";

  $str+="<td><input type='text' name='advPosition[]' /></td>";

  $str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";

  $str+="</tr>";

  $("#addTr").append($str);

  });

  });

  function getDel(k){

  $(k).parent().remove();

  }

  </script>

  --------------------------------------------------------------------------------

  html部分

  <table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">

  <tr align="center">

  <td>广告名称</td>

  <td>广告图片</td>

  <td>广告内容</td>

  <td>广告来源</td>

  <td>广告作者</td>

  <td>广告描述</td>

  <td align="center"><a href="#" id="getAtr">追加内容</a></td>

  </tr>

  <tbody id="addTr">

  <tr align="center">

  <td><input type="text" name="advTitle[]"/></td>

  <td><input type="file" name="img[]" /></td>

  <td><input type="text" name="advContent[]" /></td>

  <td><input type="text" name="advSource[]" /></td>

  <td><input type="text" name="advAuthor[]" /></td>

  <td><input type="text" name="advPosition[]" /></td>

  <td></td>

  </tr>

  </tbody>

  <tr align="center">

  <td colspan="5"><input type="submit" value="全部添加" /></td>

  </tr>

  </table>