[转]JQuery操作Table 

<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.tableEdit.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   $('#ck_0').click(function(){
        var bl = this.checked;    
        $('input[type="checkbox"]').each(function(){
            this.checked=bl;
        });
   });
    $("#zj").click(function(){
            addRow("table");
    });

    $("#sc").click(function(){
            removeRow("table");
    });
    $("#bc").click(function(){    
            alert(getJsonString("table"));
    });
});

function changeSel(obj){
    alert(obj.value);
}    

</script>
</head>
<body>
<input type="button" id="zj" value="增加"/>
<input type="button" id="sc" value="删除"/>
<div>
<table id="table" border="1" >
    <tr>
        <td><input  type="checkbox" id="ck_0" name="ck_0"/></td>
        <td editTemplate="td1">开始符号</td>
        <td editTemplate="td2">开始值</td>
        <td editTemplate="td3">结束符号</td>
        <td editTemplate="td4">结束值</td>
    </tr>
</table>
</div>
<input type="button" id="bc" value="保存"/>



<textarea id="td1" style="display:none"> 
    <select name="begin_type" onchange="changeSel(this)" >
        <option value=">">大于</option>
        <option value=">=">大于等于</option>
        <option value="=">等于</option>
    </select>
</textarea>
<textarea id="td2" style="display:none"> 
    <input type="text" name="begin" />
</textarea>
<textarea id="td3" style="display:none"> 
    <select name="end_type">
        <option value="<">小于</option>
        <option value="<=">小于等于</option>
        <option value="=">等于</option>
    </select>
</textarea>
<textarea id="td4" style="display:none"> 
    <input type="text" name="end"/>
</textarea>
</body>
</html>
var data = "{'txm':'06945174702517','mc':'青霉素','jx':'250mg*12片','gg':'规格','dw':'盒','zgjg':'50.0'}";

//自定义方法
  function addRows(table_id,data){
        var rows=$("#"+table_id);
        var vNum=$("#"+table_id+" tr").size();
        var tr_Num = vNum - 1;

        var tr = handleData(data,tr_Num);
        $(tr).insertAfter($("#"+table_id+" tr:eq("+tr_Num+")"));  
  }
  
  function handleData(data,tr_Num){
          var obj = eval("("+data+")");
          var tr = "<tr>";
          tr += '<td height="28" align="center" valign="middle" bgcolor="#FFFFFF" ><input  type="checkbox" id="ck_'+tr_Num+'" name="ck_'+tr_Num+'"/></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style="width: 100px; height: 20px;" value="'+obj["txm"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style="width: 140px; height: 20px;" value="'+obj["mc"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style="width: 80px; height: 20px;" value="'+obj["jx"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" class="hei_12px"><input type="text" name="textfield10" class="nkk" style="width: 50px; height: 20px;" value="'+obj["gg"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" class="hei_12px"><input type="text" name="textfield10" class="nkk" style="width: 50px; height: 20px;" value="'+obj["dw"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" class="hei_12px"><input name="jg" type="text" class="nkk" style="width:50px; height:20px" value="'+obj["zgjg"]+'"/></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input name="xsjg" type="text" class="nkk" style="width:80px; height:20px" value=""/></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ></td>';
        tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield3" class="nkk" style="width: 80px; height: 20px;" value="" /></td>';  
        tr += '</tr>';
        return tr;
  }
posted @ 2012-12-03 19:01  one light  阅读(259)  评论(0)  编辑  收藏  举报