JavaScript操作Table和動態生成Table
阿新 • • 發佈：2019-01-18
mark 增加 添加行 category length pla ddr tps amp JavaScript操作Table
（1）自動生成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 style="border:0px solid grey"> <th style="font-size:13px;">科目</th> <th style="font-size:13px;">科目分類</th> <th style="font-size:13px;">科目編碼</th> <th style="font-size:13px;">科目分數</th> </tr> </thead> <tbody id="trlist"> <tr style="border:0px" id="tr"> <td> <select name="merchant3" id="merchant5" style="height:28px;"> <option value="">請選擇科目</option> </select> </td> <td> <select name="category3" id="category5" style="height:28px;"> <option value="">請選擇分類</option> </select> </td> <td><input type="text" name="rightCode3" id="rightCode5" value="" style="width:150px;" required /></td> <td><input type="text" name="rightName3" id="rightName5" value="" style="width:150px;" 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 style="border:0px solid grey">
<th style="font-size:13px;">科目</th>
<th style="font-size:13px;">科目分類</th>
<th style="font-size:13px;">科目編碼</th>
<th style="font-size:13px;">科目分數</th>
</tr>
</thead>
<tbody id="trlist">
<tr style="border:0px" id="tr">
<td>
<select name="merchant3" id="merchant5" style="height:28px;">
<option value="">請選擇科目</option>
</select>
</td>
<td>
<select name="category3" id="category5" style="height:28px;">
<option value="">請選擇分類</option>
</select>
</td>
<td><input type="text" name="rightCode3" id="rightCode5" value="" style="width:150px;" required /></td>
<td><input type="text" name="rightName3" id="rightName5" value="" style="width:150px;" 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>JavaScript操作Table和動態生成Table