[转]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=" 100px; height: 20px;" value="'+obj["txm"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style=" 140px; height: 20px;" value="'+obj["mc"]+'" /></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style=" 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=" 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=" 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="50px; height:20px" value="'+obj["zgjg"]+'"/></td>';
          tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input name="xsjg" type="text" class="nkk" style="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=" 80px; height: 20px;" value="" /></td>';  
        tr += '</tr>';
        return tr;
  }

相关阅读:
电商用户留存率比例
 转载——使用Python拆分数据量大的CSV文件（亲测有效）
SQL中group by的注意事项
 MySQL中DELETE子句与TRUNCATE TABLE语句的区别
 TimeStamp( )函数, TimeStampAdd( )函数 , TimeStampDiff( )函数
 MySQL 练习题目二刷
 math对象，BOM模型中常用对象
 js函数和date内置对象
 while循环和for循环
 不等于运算符、逻辑表达式、if语句及switch语句
原文地址：https://www.cnblogs.com/oneLight/p/2800164.html