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>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
