JavaScript操做Table和動態生成Table
JavaScript操做Table
（1）自動生成Table（添加行/刪除行）javascript
<!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中每行的值css
<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
<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每行的值並判斷是否重複java
<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每列的值
jquery
附加：app
（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>
相關文章
- 1. JavaScript（JS）動態生成table（混合table）
- 2. jsp動態生成table
- 3. ajax動態生成table
- 4. js對table的動態操做
- 5. 後臺動態生成table表格
- 6. elementUI 動態生成幾行幾列 table
- 7. 動態生成Table內文字換行。
- 8. 淺談後臺中動態生成Table
- 9. 【Javascript Trick系列】2、table相關操做
- 10. Flink table API 操做
- 更多相關文章...
- • Eclipse 生成jar包 - Eclipse 教程
- • SQLite Truncate Table - SQLite教程
- • 算法總結-滑動窗口
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
