jQuery Positioning data is until the last line

本文链接：https://blog.csdn.net/u012002840/article/details/41042973

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Positioning data is until the last line</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>

<body>
   <div id="mainPage" style="width:1200px; height:200px; overflow-y:auto;" align="center" >
       <table id="tab" boder="0" cellpadding="0" cellspacing="0">
          <tr id="1" name="a1">
            <td height="20">1</td>
          </tr>
       </table>
   </div>
   <div align="center" >
       <hr/>
       <tr>
           <td>
               <input type="button" οnclick="add()" value="增加"></input>
           </td>
           <td>
               <input type="button" οnclick="remTr()" value="删除最后一行"></input>
           </td>
           <td>
               <input type="button" οnclick="remAllTr()" value="删除全部"></input>
           </td>
       </tr>
       <tr>
           <td><input type="text" id="trNo" οnfοcus="cleanVal()" value="请输入想要删除的数字！" style="color:#FF0000;"></input></td>
           <td><input type="button" οnclick="remSpecificTr()" value="确认删除"></input></td>
       </tr>
   </div>

   <script type="text/javascript">

       // initialize
       $(function () {
           positioning();
       });

       // Positioning data is until the last line
       function positioning() {
           var trlen = $("#mainPage tr").length;
           $("#mainPage").scrollTop(20*trlen);
       }

       // add a column data
       function add(){
           $("#mainPage").append("<tr name=\"a"+ ++$("#mainPage tr").length +"\" id=\""+ ++$("#mainPage tr").length +"\"><td height=\"20\">"+ ++$("#mainPage tr").length +"</td></tr>");
           $("#trNo").val('请输入想要删除的数字！');
           positioning();
       }

       // remove last column
       function remTr(){
           $("#mainPage").find("tr").last().remove();
       }

       // remove all tr
       function remAllTr(){
           $("tr").remove();
       }

       // To empty the clues
       function cleanVal() {
           if($.trim($("#trNo").val())=="请输入想要删除的数字！")
               $("#trNo").val('');
       }

       // remove specific tr
       function remSpecificTr(){
           $("tr[id=" + $.trim($("#trNo").val()) + "]").remove();
           if($("#mainPage tr").length==0) {
               $("#trNo").val('数据已全部清空！');
           } else {
               $("#trNo").val('请输入想要删除的数字！');
           }

       }
   </script>

</body>
</html>