JavaScript操作Table
（1）自动生成Table（添加行/删除行）

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>动态生成表格</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){ //<tr/>居中 $("#tab tr").attr("align","center"); //增加行 $("#but").click(function(){ var _len = $("#tab tr").length; $("#tab").append("<tr id="+_len+" align='center'>" +"<td>"+_len+"</td>" +"<td>用户"+_len+"</td>" +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>" +"<td><a href=\'#\' onclick=\'delRow("+_len+")\'>删除</a></td>" +"</tr>"); }) }) //删除行 var delRow =function(index) { var _len = $("#tab tr").length; $("tr[id='"+index+"']").remove();//删除当前行 for(var i=index+1,j=_len;i<j;i++) { var nextTxtVal = $("#desc"+i).val(); $("tr[id=\'"+i+"\']") .replaceWith("<tr id="+(i-1)+" align='center'>" +"<td>"+(i-1)+"</td>" +"<td>用户"+(i-1)+"</td>" +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>" +"<td><a href=\'#\' onclick=\'delRow("+(i-1)+")\'>删除</a></td>" +"</tr>"); } }</script></head><body> <table id="tab"></table> <button id="but">添加table的行</button></body></html>

（2）获取Table中每行的值

<html><head><meta charset="utf-8" /><title>获取Table中每行的值</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body> <table width="100%" border="1" id="tb"> <tr> <td><INPUT TYPE="text" NAME="a1" value="Apple"></td> <td> <select id="sel"> <option value='man'>男</option> <option value='ma'>女</option> </select> </td> <td>21</td> </tr> <tr> <td><INPUT TYPE="text" NAME="a2" value="王五"></td> <TD><select id="sel"> <option value='man'>男</option> <option value='ma'>女</option> </select></TD> <TD>19</TD> </tr> <tr> <td><INPUT TYPE="text" NAME="a1" value="张三"></td> <td> <select id="sel"> <option value='man'>男</option> <option value='ma'>女</option> </select> </td> <td>21</td> </tr> </table><button id="btn">获取Table中每行的值</button><script>$(function(){ var str=''; $('#btn').on('click',function(){ $('#tb tr').each(function(i){ var columnOne = $(this).children('td').eq(0).children("input").val(); var columnTwo = $(this).children('td').eq(1).children("#sel").val(); var columnThree = $(this).children('td').eq(2).text(); str+=columnOne+","+columnTwo+","+columnThree+"|"; }); alert(str); str=''; })})</script></body></html>

（3）使用Js中的clone实现动态添加Table中的行和删除行

<html><head><meta charset="utf8" /><title>动态生成Table</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body> <div> <table class="table" id="tb3" border="0px solid grey"> <thead> <tr > <th >科目</th> <th >科目分类</th> <th >科目编码</th> <th >科目分数</th> </tr> </thead> <tbody id="trlist"> <tr id="tr"> <td> <select name="merchant3" id="merchant5" > <option value="">请选择科目</option> </select> </td> <td> <select name="category3" id="category5" > <option value="">请选择分类</option> </select> </td> <td><input type="text" name="rightCode3" id="rightCode5" value="" required /></td> <td><input type="text" name="rightName3" id="rightName5" value="" required /></td> <td> <button id="remove" >删除</button> </td> </tr> </tbody> </table> <div><button id="addrow">动态生成Table</button></div></div><script type="text/javascript"> $(function(){ $("#addrow").click(addrow);//绑定添加事件 $("#remove").click(removerow);//绑定删除事件。 }); function addrow(){//增加 var _len = $("#trlist tr").length; if(_len<5) { var newObj=$("#tr").clone(true); newObj.children('td').eq(2).children("input").val(''); newObj.children('td').eq(3).children("input").val(''); $(".table>tbody:last").append(newObj);//复制tr，并且添加 }else{ alert("最多只能添加5个!"); } } function removerow(){//移除 var _len = $("#trlist tr").length; if(_len==1){ return; } $(this).parent().parent().remove(); } </script></body></html>

（4）获取Table每行的值并判断是否重复

<html><head><meta charset="utf8" /><title>获取Table每行的值并判断是否重复</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body> <div> <table class="table" id="tb3" border="0px solid grey"> <thead> <tr > <th >科目</th> <th >科目分类</th> <th >科目编码</th> <th >科目分数</th> </tr> </thead> <tbody id="trlist"> <tr id="tr"> <td> <select name="merchant3" id="merchant5" > <option value="">请选择科目</option> </select> </td> <td> <select name="category3" id="category5" > <option value="">请选择分类</option> </select> </td> <td><input type="text" name="rightCode3" id="rightCode5" value="" required /></td> <td><input type="text" name="rightName3" id="rightName5" value="" required /></td> <td> <button id="remove" >删除</button> </td> </tr> </tbody> </table> <div> <button id="addrow">动态生成Table</button> <button onClick="getRow()">获取Table每行的值并判断是否重复</button> </div></div><script type="text/javascript"> $(function(){ $("#addrow").click(addrow);//绑定添加事件 $("#remove").click(removerow);//绑定删除事件。 }); function addrow(){//增加 var _len = $("#trlist tr").length; if(_len<5) { var newObj=$("#tr").clone(true); newObj.children('td').eq(2).children("input").val(''); newObj.children('td').eq(3).children("input").val(''); $(".table>tbody:last").append(newObj);//复制tr，并且添加 }else{ alert("最多只能添加5个!"); } } function removerow(){//移除 var _len = $("#trlist tr").length; if(_len==1){ return; } $(this).parent().parent().remove(); } var list = []; var str=''; function getRow(){ $('#trlist tr').each(function (i) { var merchant = $(this).children('td').eq(0).children("select").val(); var category = $(this).children('td').eq(1).children("select").val(); var rightCode = $(this).children('td').eq(2).children("input").val(); var rightName = $(this).children('td').eq(3).children("input").val(); list.push({"merchant": merchant,"category":category,"rightCode":rightCode,"rightName":rightName}); str += merchant + "," + category + "," + rightCode + "," + rightName + ";" //判断是否重复 judgeRepeatRow(list); }); alert(str); str=""; } function judgeRepeatRow(list){ //前台页面去重 var find = false; for (var i = 0; i < list.length; i++) { for (var j = i + 1; j < list.length; j++) { if (list[i].rightCode == list[j].rightCode && list[i].rightName == list[j].rightName) { find = true; break; } } if (find) { break; } } if(find){ alert("重复 !"); return; } } </script></body></html>

（5）获取Table每列的值

附加：

（1）获取文本框的值到一个文本框中（change事件和focus事件）<!DOCTYPE html><html><head><meta charset="utf-8"> <title>获取文本框的值</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); var str=''; $("input[id=text]").each(function() { $(this).bind("change", function() { str+=$(this).val()+","; $("#text2").val(str); }); });});</script></head><body>第一个值: <input type="text" id='text'/><br/>第二个值: <input type="text" id='text'/><br/>获取上面文本框的值: <input type="text" id='text2' /><br/></body></html>