집
웹 프론트엔드
JS 튜토리얼
jQuery를 기반으로 한 테이블 정보의 동적 추가, 삭제, 수정 및 쿼리(왼쪽/오른쪽 클릭 프롬프트 포함)(Zjmainstay의 원본)_jquery



jQuery를 기반으로 한 테이블 정보의 동적 추가, 삭제, 수정 및 쿼리(왼쪽/오른쪽 클릭 프롬프트 포함)(Zjmainstay의 원본)_jquery
May 16, 2016 pm 05:51 PM온라인 데모: http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html
//왼쪽 클릭
코드를 복사하세요 코드는 다음과 같습니다.
<html>
<머리>
<title>jQuery 动态增删表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<본문>
<script type="text/javascript">
$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 534;
var preEdit = null;
var inputData = '<input id= "tmpEditor" type="text" value="?"></input>';
var findListening = function(){
//表格点击响应
$("td"). unbind().click(function(){
var tdData = $("#tmpEditor").val();
if( !$(this).parent().hasClass('editting')) {
preEdit&&preEdit.empty().html(tdData.trim(' '))
preEdit = null
$("#tmpEditor").parent().empty().html($ ("#tmpEditor").val())
$(".editting").removeClass('editting')
}else if( preEdit && (preEdit.parent().children(). index($(preEdit)) != $(this).parent().children().index($(this))) ){
preEdit.empty().html(tdData.trim(' ') );
preEdit = null;
}else{
if(!$("#tmpEditor").val()) {
preEdit = $(this); $(this).html();
$(this).empty().append(inputData.replace('?',tdData))
$("#tmpEditor").focus();
}
}
if(!$(this).parent().hasClass('editting')){
vartipStyle = 'top:' (parseInt($(this).offset ().top) addToTrTop) 'px;left:' (parseInt($(this).parent().offset().left) addToTrLeft) 'px;';
$("#clickTips").attr('style',tipStyle).show();
}
bindListening();
});
//向上增加一行
$("#addUp").unbind().click(function(){
doAddTrData($(this),'up');
bindListening() ;
});
//向下增加一行
$("#addDown").unbind().click(function(){
doAddTrData($(this),'down');
bindListening( )
});
//删除当前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
bindListening() ;
});
//编辑当前行
$("#edit").unbind().click(function(){
doEditTrData($(this),'edit');
bindListening() ;
});
var addTrData = $("tr:first").clone(true).attr('class','newAdd');
var getIndex = function(clickedTd,type){
var fields = $("tr");
var addIndex = -1;
for(var i=1;i<fields.length;i ){
vartipStyle = clickedTd.parent().attr('style');
var topValue = 'top: ' (parseInt(fields.eq(i).offset().top) addToTrTop);
var ie_topValue = 'top: ' (parseInt(fields.eq(i).offset().top) (addToTrTop-2));
if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) {
switch(type.toLowerCase()){
case ' up':
addIndex = i-1;
휴식;
case 'down':
case 'edit':
case 'delete':
addIndex = i;
휴식;
}
}
}
return addIndex;
}
var doAddTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).after(addTrData);
setTimeout('$(".newAdd").attr("class",null)',1000);
$("#clickTips").hide();
거짓을 반환합니다.
}
var doDeleteTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).remove();
$("#clickTips").hide();
거짓을 반환합니다.
}
var doEditTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).addClass('editting');
$("#clickTips").hide();
거짓을 반환합니다.
}
}
bindListening();
});
</script>
<style type="text/css">
테이블{
너비:580px;
여백:0 자동;
}
td,#tmpEditor{
display:block;
플로트:왼쪽;
테두리:1px 솔리드 #000000;
여백:자동 0.5px;
너비:60px;
높이:20px;
}
#clickTips{
테두리:1px 솔리드 #000000;
위치:절대;
왼쪽:3px;
폭:120px;
패딩:3px;
디스플레이:없음;
배경색:#F5FFFA;
z-색인:3;
}
범위{
float:left;
폭:100px;
높이:20px;
지우기:둘 다;
}
.cloneTr{
디스플레이:없음;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}
</style>
<div id="tableContainer">
<테이블>
<tr class="cloneTr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>6</td>
</tr>
</테이블>
</div>
<div id="clickTips">
<span id="addUp">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="addDown">向下增加一行</span>
<span id="delete">删除当前行</span>
</div>
</body>
</html>
jqueryAutoAddDeleteTableTr_rightClick.html
//右键(含屏蔽浏览器右键功能)
复제대码 代码如下:
<html>
<머리>
<title>jQuery 动态增删表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<본문>
<script type="text/javascript">
$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 60;
var preEdit = null;
var inputData = '<input id= "tmpEditor" type="text" value="?"></input>';
varbindListening = function(){
//屏蔽浏览器右键
if (window.Event) document.captureEvents(Event.MOUSEUP);
function nocontextmenu(e){
if(!e) var e=window.event;
e.cancelBubble = true
e.returnValue = false;
false 반환
}
function norightclick(e){
if(!e) var e=window.event;
if (window.Event){
if (e .which == 2 || e.which == 3)
return false
}else if (e.keyCode == 2 || e.keyCode == 3){
e.cancelBubble = true
e.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // IE5의 경우
document.onmousedown = // 모두의 경우 기타
//End 屏蔽浏览器右键
//表格右键响应
$("td").mousedown(function(e){
var code;
if(!e) var e=window.event;
if(e.keyCode) {
code=e.keyCode;
}else if(e.which){
code = e.which; }
var tdData = $("#tmpEditor").val();
if(code == 3){
vartipStyle = 'top:' (parseInt($(this).offset().top) addToTrTop) 'px;left:' (parseInt($(this) .offset().left) addToTrLeft) 'px;';
$("#clickTips").attr('style',tipStyle).show();
거짓을 반환합니다.
}
if(code == 1){
if( !$(this).parent().hasClass('editting')) {
preEdit&&preEdit.empty().html(tdData .trim(' '));
preEdit = null;
$("#tmpEditor").parent().empty().html($("#tmpEditor").val());
$(".editting").removeClass('editting');
}else if( preEdit && (preEdit.parent().children().index($(preEdit)) != $(this).parent().children().index($(this))) ){
preEdit.empty().html(tdData.trim(' '));
preEdit = null;
}else{
if(!$("#tmpEditor").val()) {
preEdit = $(this);
var tdData = $(this).html();
$(this).empty().append(inputData.replace('?',tdData));
$("#tmpEditor").focus();
}
}
false를 반환합니다.
}
bindListening();
}); //End 表格右键响应
//向上增加一行
$("#addUp").unbind().click(function(){
doAddTrData($(this),'up');
bindListening()
});
//向下增加一行
$("#addDown").unbind().click(function(){
doAddTrData($(this),'down');
bindListening( )
});
//删除当前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
bindListening() ;
});
//编辑当前行
$("#edit").unbind().click(function(){
doEditTrData($(this),'edit');
bindListening() ;
});
var addTrData = $("tr:first").clone(true).attr('class','newAdd');
var getIndex = function(clickedTd,type){
var fields = $("tr");
var addIndex = -1;
for(var i=1;i<fields.length;i ){
vartipStyle = clickedTd.parent().attr('style');
var topValue = 'top: ' (parseInt(fields.eq(i).offset().top) addToTrTop);
var ie_topValue = 'top: ' (parseInt(fields.eq(i).offset().top) (addToTrTop-2));
if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) {
switch(type.toLowerCase()){
case ' up':
addIndex = i-1;
휴식;
case 'down':
case 'edit':
case 'delete':
addIndex = i;
휴식;
}
}
}
return addIndex;
}
var doAddTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).after(addTrData);
setTimeout('$(".newAdd").attr("class",null)',1000);
$("#clickTips").hide();
거짓을 반환합니다.
}
var doDeleteTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).remove();
$("#clickTips").hide();
거짓을 반환합니다.
}
var doEditTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).addClass('editting');
$("#clickTips").hide();
거짓을 반환합니다.
}
}
bindListening();
});
</script>
<style type="text/css">
테이블{
너비:580px;
여백:0 자동;
}
td,#tmpEditor{
display:block;
플로트:왼쪽;
테두리:1px 솔리드 #000000;
여백:자동 0.5px;
너비:60px;
높이:20px;
}
#clickTips{
테두리:1px 솔리드 #000000;
위치:절대;
왼쪽:3px;
폭:120px;
패딩:3px;
디스플레이:없음;
배경색:#F5FFFA;
z-색인:3;
}
범위{
float:left;
폭:100px;
높이:20px;
지우기:둘 다;
}
.cloneTr{
디스플레이:없음;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}
</style>
<div id="tableContainer">
<테이블>
<tr class="cloneTr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>6</td>
</tr>
</테이블>
</div>
<div id="clickTips">
<span id="addUp">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="addDown">向下增加一行</span>
<span id="delete">删除当前行</span>
</div>
</body>
</html>
jqueryAutoAddDeleteTableTr_leftClick_addsearch.html
//左键添加查询功能
复主代码 代码如下:
<html>
<머리>
<title>jQuery 动态增删表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<본문>
<script type="text/javascript">
$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 534;
var addToTdLeft = 60; //若设置addToTdLeft则addToTrLeft失效
var preEdit = null
var inputData = '<input id="tmpEditor" type="text" value="?"></input>'
varbindListening = function(){
//表格点击响应
$("td").unbind().click(function(){
if($(this).hasClass('search')) return false;
var tdData = $("#tmpEditor").val();
if( !$(this).parent().hasClass('editting')) {
preEdit&&preEdit.empty().html(tdData. Trim(' '));
preEdit = null;
$("#tmpEditor").parent().empty().html($("#tmpEditor").val()); >$(".editting").removeClass('editting');
}else if( preEdit && (preEdit.parent().children().index($(preEdit)) != $(this). parent().children().index($(this))) ){
preEdit.empty().html(tdData.trim(' '))
preEdit = null
}else; {
if(!$("#tmpEditor").val()) {
preEdit = $(this)
var tdData = $(this).html(); this).empty().append(inputData.replace('?',tdData))
$("#tmpEditor").focus();
}
}
if(!$(this).parent().hasClass('editting')){
if(!addToTdLeft){
var offsetLeft = (parseInt($ (this).parent().offset().left) addToTrLeft);
}else {
var offsetLeft = (parseInt($(this).offset().left) addToTdLeft);
}
vartipStyle = 'top:' (parseInt($(this).offset().top) addToTrTop) 'px;left:' offsetLeft 'px;';
$("#clickTips").attr('style',tipStyle).show();
}
bindListening();
});
//向上增加一行
$("#addUp").unbind().click(function(){
doAddTrData($(this),'up');
bindListening() ;
});
//向下增加一行
$("#addDown").unbind().click(function(){
doAddTrData($(this),'down');
bindListening( )
});
//删除当前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
bindListening() ;
});
//编辑当前行
$("#edit").unbind().click(function(){
doEditTrData($(this),'edit');
bindListening() ;
});
//查询操작
$("#searchButton").click(function(){
$("#clickTips").hide();
var trs = $("#tableContainer ").find("tr");
var tdLength = trs.eq(0).children('td').length;
var RegExp = '';
for(var i=0 ;i<tdLength;i ){
RegExp = '[^,]*' trs.eq(1).find('input').eq(i).val() '[^,]*,' ;
}
//不加eval则则匹配失效
RegExp = eval('/' RegExp.substr(0,RegExp.length-1) '/i'); = [];
for(var i=2;i
for(var j=0;j
}
stringObject[i] = stringObject[i ].substr(0,stringObject[i].length-1).toString();
}
for(var i=2;i<trs.length;i ){
if(stringObject[ i].search(RegExp)) {
trs.eq(i).hide();
}else{
trs.eq(i).show()
}
}
bindListening()
});
var addTrData = $("tr:first").clone(true).attr('class','newAdd');
var getIndex = function(clickedTd,type){
var fields = $("tr");
var addIndex = -1;
for(var i=1;i<fields.length;i ){
vartipStyle = clickedTd.parent().attr('style');
var topValue = 'top: ' (parseInt(fields.eq(i).offset().top) addToTrTop);
var ie_topValue = 'top: ' (parseInt(fields.eq(i).offset().top) (addToTrTop-2));
if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) {
switch(type.toLowerCase()){
case ' up':
addIndex = i-1;
휴식;
case 'down':
case 'edit':
case 'delete':
addIndex = i;
휴식;
}
}
}
return addIndex;
}
$("#clearSearchButton").click(function(){
$("#clickTips").hide();
$(".search 입력[type=text] ").val('');
$("tr").show();
$("tr.cloneTr").hide();
})
var doAddTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).after(addTrData);
setTimeout('$(".newAdd").attr("class",null)',1000);
$("#clickTips").hide();
거짓을 반환합니다.
}
var doDeleteTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).remove();
$("#clickTips").hide();
거짓을 반환합니다.
}
var doEditTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).addClass('editting');
$("#clickTips").hide();
거짓을 반환합니다.
}
}
bindListening();
});
</script>
<style type="text/css">
테이블{
여백:0 자동;
}
td,#tmpEditor{
display:block;
플로트:왼쪽;
테두리:1px 솔리드 #000000;
여백:자동 0.5px;
너비:60px;
높이:20px;
}
#clickTips{
테두리:1px 솔리드 #000000;
위치:절대;
왼쪽:3px;
폭:120px;
패딩:3px;
디스플레이:없음;
배경색:#F5FFFA;
z-색인:3;
}
범위{
float:left;
폭:100px;
높이:20px;
지우기:둘 다;
}
.cloneTr{
디스플레이:없음;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}
.search{
배경색:#dddccc;
}
.search 입력{
padding-bottom: 0;
오른쪽 여백: 7px;
}
.searchButtonTd{
float:left;
}
#searchButton,#clearSearchButton{
여백-왼쪽: -2px;
여백 상단: -2px;
패딩 바닥: 0;
오른쪽 여백: 20px;
}
</style>
<div id="tableContainer">
<테이블>
<tr class="cloneTr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search searchButtonTd"><input id="searchButton" type="button" size="10" value="查询"/></td>
<td class="search searchButtonTd"><input id="clearSearchButton" type="button" size="10" value="清除"/></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>아아</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>아아</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>444</td>
<td>555</td>
<td>777</td>
<td>888</td>
</tr>
<tr>
<td>1a</td>
<td>2b</td>
<td>4d</td>
<td>5e</td>
<td>6f</td>
<td>8시간>
</tr>
</테이블>
</div>
<div id="clickTips">
<span id="addUp">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="addDown">向下增加一行</span>
<span id="delete">删除当前行</span>
</div>
</body>
</html>
PS:
var addToTrTop = 10;
var addToTrLeft = 534;
var addToTdLeft = 60; //addToTdLeft가 설정되면 addToTrLeft가 유효하지 않음을 나타냅니다. 프롬프트 DIV clickTips 현재 tr의 상단과 왼쪽으로부터의 오프셋은 위로 또는 왼쪽으로 이동하기 위해 음수일 수 있습니다.
소프트웨어 다운로드:
다운로드
작성자: Zjmainstay 출처: http://www.cnblogs.com/Zjmainstay/
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7287
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1206
29

