溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
