問題請教用jquery實現下圖樣式 謝謝

本帖最后由 wjhan 于 2011-06-29 11:02:46 编辑

解决方案 »

  1.   

    如果在table中新增行就好處理 現在是數據庫查詢出來的數據 要給每一行資料 新增明細 維護資料 覺得不要處理 希望各位賜教 謝謝
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
      <script type="text/javascript">
    var tt=[{"kh":"1234","nl":"23","rq":"2011-1-1"},{"kh":"2323","nl":"45","rq":"2011-6-1"}];
    $(function(){
    var len=tt.length;
    for(var i=0;i<len;i++){
    var trHtml="<tr class='len"+i+"'>";
    trHtml+="<td>"+tt[i].kh+"</td>"
    trHtml+="<td>"+tt[i].nl+"</td>"
    trHtml+="<td>"+tt[i].rq+"</td>"
    trHtml+="<td><input type='button' value='+' class='abtn'/></td>"
    trHtml+="<td></td><td></td><td></td>"
    trHtml+="</tr>";
    $("#xx tr:last").after(trHtml);
    } $(".abtn").click(function(){
    var cn=$(this).parent().parent().attr("class");
    var trHtml="<tr class='"+cn+"'>";
    trHtml+="<td></td><td></td><td></td>"
    trHtml+="<td><input type='button' value='-' class='rbtn'/></td>"
    trHtml+="<td><input type='text'/>";
    trHtml+="<td><input type='text'/>";
    trHtml+="<td><input type='text'/>";
    trHtml+="</tr>"; if($(this).parent().parent().next("."+cn).html()!=null){
    $("."+cn+":last").after(trHtml);
    }else{
    $(this).parent().parent().after(trHtml);
    } $(".rbtn").click(function(){
    $(this).parent().parent().remove();
    })
    })
    })
      </script>
      <style style="text/css">
    table td{border:solid 1px black}
    table {
    border-collapse:collapse;
    empty-cells:show;
    border:solid black 1px;
    text-align:center;
    }
    .tongji{width:80px}
      </style>
     </HEAD> <BODY>
      <table id="xx" border="1">
    <tr>
    <td>工号</td>
    <td>年龄</td>
    <td>进场日期</td>
    <td></td>
    <td>完成数量</td>
    <td>实际完成日期</td>
    <td>状态</td>
    </tr>
      </table>
     </BODY>
    </HTML>