关于jquery实现动态创建表格和动态显示数据的问题？

最新推荐文章于 2013-12-11 18:22:29 发布

计算机刘老师

最新推荐文章于 2013-12-11 18:22:29 发布

阅读量5.3k

点赞数

文章标签： jquery function class table div button

本文链接：https://blog.csdn.net/ltl451011/article/details/6705474

版权

可执行的代码：

<%@page contentType="text/html" pageEncoding="UTF-8" import="java.sql.*"%>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>my Table Edit</title>
        <style type="text/css">
   * {font:12px "微软雅黑"}
   tr.hit td{background: #FFCC00;}

   .suggest_link{background-color: #FFFFFF;padding: 2px 6px;}
   .suggest_link_over {cursor: default;background-color: #00FFFF; padding: 2px 6px;}
   #search_suggest{position: absolute; background-color: #FFF; border: 1px solid gray; }
   .row1, .row2, .row3, .row4, .in {margin:0; padding:0; width:100%; border:none;}

   .row2, .row3, .row4{text-align:right;}

        </style>

      <script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
    var currRow;
    $(".suggest_link").live("click", function(){
     //增加到表格
     var x = $(this).text().split("，");
     //判断重复

     var repeat=false;

     $("table tbody tr").find("td").each(function(i){
      if($(this).text()==x[0]){
       $(this).css("background-color","red");
       repeat=true;
       return false;
      }
     })

     if (repeat) return false;

     $("table tbody tr").eq(currRow-1).find("td:gt(0)").each(function(i){
      if(i==1)
       $(this).find(".row1").val(x[i]);
      else if(i==2)
       $(this).find(".row2").val(x[i]);
      else if(i==3)
       $(this).find(".row3").val(x[i]);
      else if(i==4)
       $(this).find(".row4").val(x[i]);
      else
       $(this).text(x[i]);
     })
     $("#search_suggest").html('');
    });

    $(".suggest_link").live("click", function(){
     //alert($(this).html());
     $(".txtSearch").val($(this).html());
     $("#search_suggest").html('');
    })
    $(".suggest_link").live("mouseover", function(){
     $(this).addClass("suggest_link_over");
    })
    $(".suggest_link").live("mouseout", function(){
     $(this).removeClass("suggest_link_over");
    })

    //single select
                $("table tbody tr").live("click", function(){
     currRow = this.rowIndex;
     $(this).addClass("hit").siblings().removeClass("hit");
    });

                $(".row1, .row2,. row3, .row4").live("focus", function(){
     this.select();
    });

                $(".row1").live("keyup", function(){
     $("#search_suggest").html("loading...").attr('background-image', 'images/wait16trans.gif');
     //此为测试,实际运行时通过sevlet读数据
     //$.get("productServlet", {search:$(this).val()}, function(suggest) {
     // $("#search_suggest").html(suggest);
     //})
     //现为测试数据
     var suggest = '<div class="suggest_link">太原理工大学，刘廷龙，24，研究生，学生，开发者</div>';
     suggest += '<div class="suggest_link">太原理工大学，李越，25，研究生，学生，研究者</div>';
     suggest += '<div class="suggest_link">清华大学，王伟，43，博士生，高级工程师，项目经理</div>';
     suggest += '<div class="suggest_link">北京大学，高洪亮，34，百度总公司，教授，项目负责人</div>';
     suggest += '<div class="suggest_link">010105，T恤，1，500.50，5</div>';
     var X = this.getBoundingClientRect().left;
     var Y = this.getBoundingClientRect().top;
     $("#search_suggest").html(suggest).css({left:X,top:Y+18});
    });

    //add a row
    $('#addRow').click(function(){
     $("table tbody").append($("table tbody tr:first").clone());
     //alert($("table tbody tr:first").clone());
     rowNumber();
     alert($("table tbody").length);
    });

    //delete a row
    $('#deleteRow').click(function(){
     $("table tr").eq(currRow).remove();
     currRow="undefined";
     rowNumber();
    });

    //row No
    function rowNumber() {
     $("table").find('tr td:nth-child(1)').each(function(index, elem) {
      $(elem).html(index+1);
     });
    }

            });
        </script>
    </head>

    <body>
    <form>


      <h2 class="trigger">
       <a href="#">9 项目负责人及主要研究人员（从科技人员数据库中选择）</a><a href="help.html"
        class="r">?</a>
      </h2>
      <div class="toggle_container">
       <div class="block">
<input id="addRow" type="button" value="Add a Row" />
<input id="deleteRow" type="button" value="delete a Row" />
<hr />

   <div id="search_suggest"></div>
   <table id="tabTest" border="1">
   <thead>
    <tr>
     <th col="No" width="20" align="center">No</th>
     <th col="quantity" width="60" align="right">单位</th>
     <th col="product" width="60" align="center">姓名</th>
     <th col="productname" width="120" align="left">年龄</th>

     <th col="price" summary="max" width="60" align="right">职称</th>
     <th col="discount" " width="60" align="right">职务</th>

     <th col="size" width="60" align="left">项目职务</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td align="center">1</td>
     <td align="center"></td>
     <td><input type="text" class="row1" value="牛仔裤"></td>
     <td><input type="text" class="row2" value=""></td>
     <td><input type="text" class="row3" value=""></td>
     <td><input type="text" class="row4" value=""></td>
     <td><input type="text" class="row4" value=""></td>
    </tr>
    <tr>
    </tbody>

   </table>
   </div></div>
</form>
    </body>
</html>