jQuery를 기반으로 마지막 row_jquery를 클릭하여 행 증가 효과를 구현하는 테이블
- WBOY원래의
- 2016-05-16 15:20:341630검색
요즘 모든 것은 효율성과 인간성을 추구합니다. 물론 웹 페이지 효과도 마찬가지입니다. 데이터를 편집할 수 있는 테이블이 있으면 마지막 행까지 편집할 때 클릭하면 자동으로 행이 추가됩니다. 약간의 문제를 덜기 위해 아래에서 해당 코드를 공유하겠습니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
table
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child
{
width:30px;
text-align:center;
}
table td input
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index())
{
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>[/size]
[size=2]</head>
<body>
<table id="count">
<tr>
<th>序号</th>
<th>姓名</th>
<th>金额[USD]</th>
<th>时间</th>
<th>项目</th>
<th>单位</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</body>
</html>
위 코드는 우리의 요구 사항을 구현합니다. 표의 마지막 행을 클릭하면 자동으로 새 행이 추가됩니다. 다음은 구현 과정을 소개합니다.
1. 코드 주석:
1.$(function(){}), 문서 구조가 완전히 로드되면 함수의 코드를 실행합니다.
2.var oTable = $("#count"), 여기서는 id 속성 값이 count인 개체, 즉 테이블 개체를 가져옵니다.
3. iNum = 1, 변수를 선언하고 초기값을 1로 할당합니다. 앞으로는 추가 줄마다 줄 번호로 1이 사용됩니다.
4.eEle = '', 행 객체를 저장할 변수를 선언합니다.
5.oTable.on('click', function(e){}), 테이블 객체에 대한 클릭 이벤트 처리 함수를 등록합니다.
6.var target = e.target, 클릭한 소스 객체를 가져옵니다.
7.oTr = $(target).closest('tr'), 가장 가까운 tr 조상 요소를 가져옵니다.
8.f(oTr.index()==oTable.find('tr').last().index()), 클릭한 행이 마지막 행인지 확인합니다.
9.iNum, iNum의 값이 1씩 증가합니다.
10.eEle = oTr.clone(), 현재 행 객체를 복제합니다.
11.eEle.find('td').eq(0).text(iNum), 마지막 행의 첫 번째 셀 값을 설정합니다.
12.oTable.append(eEle), 테이블 끝에 행을 추가합니다.
마지막 행을 클릭하면 행 자동 증가 효과를 구현하기 위해 테이블의 모든 내용을 jQuery로 소개하고 싶습니다. 스크립트 홈 홈페이지 지원에 대한 지속적인 이해에 진심으로 감사드립니다.