87,904
社区成员
发帖
与我相关
我的任务
分享最近学习了几天JQuery,写了个操作table 的网页,加上ajax可以直接拿去用
最近看了 千锋Web前端的视频教程 ,讲的挺好的,花了点时间,通过借鉴,修改,写了个好玩的东西
分享给大家,有需要改进的地方希望可以修改后,回个帖子谢谢
在此特别感谢下千锋Web前端的老师!
点击第一列ID是选中,点击其他格子会编程可编辑状态,点击空白处,取消编辑状态
[/code]
分享给大家,有需要改进的地方希望可以修改后,回个帖子谢谢
在此特别感谢下千锋Web前端的老师!
点击第一列ID是选中,点击其他格子会编程可编辑状态,点击空白处,取消编辑状态
[/code]
/**
* jQuery.timers - Timer abstractions for jQuery
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
* Date: 2009/02/08
*
* @author Blair Mitchelmore
* @version 1.1.2
*
**/
jQuery.fn.extend({
everyTime: function(interval, label, fn, times, belay) {
return this.each(function() {
jQuery.timer.add(this, interval, label, fn, times, belay);
});
},
oneTime: function(interval, label, fn) {
return this.each(function() {
jQuery.timer.add(this, interval, label, fn, 1);
});
},
stopTime: function(label, fn) {
return this.each(function() {
jQuery.timer.remove(this, label, fn);
});
}
});
jQuery.event.special
jQuery.extend({
timer: {
global: [],
guid: 1,
dataKey: "jQuery.timer",
regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
powers: {
// Yeah this is major overkill...
'ms': 1,
'cs': 10,
'ds': 100,
's': 1000,
'das': 10000,
'hs': 100000,
'ks': 1000000
},
timeParse: function(value) {
if (value == undefined || value == null)
return null;
var result = this.regex.exec(jQuery.trim(value.toString()));
if (result[2]) {
var num = parseFloat(result[1]);
var mult = this.powers[result[2]] || 1;
return num * mult;
} else {
return value;
}
},
add: function(element, interval, label, fn, times, belay) {
var counter = 0;
if (jQuery.isFunction(label)) {
if (!times)
times = fn;
fn = label;
label = interval;
}
interval = jQuery.timer.timeParse(interval);
if (typeof interval != 'number' || isNaN(interval) || interval <= 0)
return;
if (times && times.constructor != Number) {
belay = !!times;
times = 0;
}
times = times || 0;
belay = belay || false;
var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});
if (!timers[label])
timers[label] = {};
fn.timerID = fn.timerID || this.guid++;
var handler = function() {
if (belay && this.inProgress)
return;
this.inProgress = true;
if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
jQuery.timer.remove(element, label, fn);
this.inProgress = false;
};
handler.timerID = fn.timerID;
if (!timers[label][fn.timerID])
timers[label][fn.timerID] = window.setInterval(handler,interval);
this.global.push( element );
},
remove: function(element, label, fn) {
var timers = jQuery.data(element, this.dataKey), ret;
if ( timers ) {
if (!label) {
for ( label in timers )
this.remove(element, label, fn);
} else if ( timers[label] ) {
if ( fn ) {
if ( fn.timerID ) {
window.clearInterval(timers[label][fn.timerID]);
delete timers[label][fn.timerID];
}
} else {
for ( var fn in timers[label] ) {
window.clearInterval(timers[label][fn]);
delete timers[label][fn];
}
}
for ( ret in timers[label] ) break;
if ( !ret ) {
ret = null;
delete timers[label];
}
}
for ( ret in timers ) break;
if ( !ret )
jQuery.removeData(element, this.dataKey);
}
}
}
});
jQuery(window).bind("unload", function() {
jQuery.each(jQuery.timer.global, function(index, item) {
jQuery.timer.remove(item);
});
});
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery_timer.js"></script>
<style>
table
{
border-collapse: collapse;
border-spacing: 0;
margin-right: auto;
margin-left: auto;
width: 800px;
margin-top:5px;
}
th, td
{
border: 1px solid #b5d6e6;
font-size: 12px;
font-weight: normal;
text-align: center;
vertical-align: middle;
height: 25px;
}
th{background-color: Gray;}
.hover{background-color: #cccc00;}
.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }
.sel{background-color:red;}
div{text-align:center;margin:0px;}
</style>
<script>
/*
$(document).ready(function () {
//鼠标移动到行变色,单独建立css类hover
//tr:gt(0):表示获取大于 tr index 为0 的所有tr，即不包括表头
$("#table1 tr:gt(0)").mouseover(function () { $(this).addClass("hover") });
$("#table1 tr:gt(0)").mouseout(function () { $(this).removeClass("hover") });
});
*/
function GetLie()
{
var ary = $("#table1 tr:eq(0)").find("th");
return ary.length;
}
function GetMaxID()
{
var MaxID = 0;
$("#table1 tr").each(function(rowIndex) {
if(rowIndex==0)
return 0;
var lie = GetLie();
//console.log($("#table1 td").size(),$("#table1 tr").size(),lie);
//alert(rowIndex);
for(var i=0;i<lie;i++)
{
//td内的文本
var vi = $(this).children('td').eq(0);
if( parseInt(vi.text())>MaxID)
{
MaxID=parseInt(vi.text());
}
}
})
return MaxID;
}
function rebind()
{
var cls = null;
//$("#table1 tbody tr").removeClass("odd even");
//$("#table1 tbody tr:odd").addClass("odd");
//$("#table1 tbody tr:even").addClass("even");
$("#table1 tbody tr:odd").attr("class","odd");
$("#table1 tbody tr:even").attr("class","even");
$("#table1 tbody tr:gt(0)").unbind();
$("#table1 tbody tr:gt(0)").mouseover(function (){
if($(this).attr("bSel")=="1")
return false;
cls=$(this).attr("class");
$(this).attr("class","hover");
});
$("#table1 tbody tr:gt(0)").mouseout(function (){
if($(this).attr("bSel")=="1")
return false;
if(cls==null)
return false;
$(this).attr("class",cls);
});
/*$("#table1").children().find("tr").each(function (index, data) {
$(this).attr("bSel","0");
});*/
//为每个单元格增加点击事件，并弹出该单元格行索引和列索引：
$("#table1 td").unbind();
$("#table1 td").click(function () {
var trSeq = $(this).parent().index(); // 行位置
var tdSeq = $(this).index(); // 列位置
//alert("当前位置：第"+trSeq+"行，第"+(tdSeq+1)+"列")
if(tdSeq==0)
{
//console.log("当前位置：第"+trSeq+"行，第"+(tdSeq+1)+"列");
var bSel = $(this).parent().attr("bSel");
console.log("bSel="+bSel);
if(bSel!="1")
{
$(this).parent().attr("bSel","1");
$(this).parent().attr("class","sel");
}
else
{
console.log("trSeq="+trSeq);
console.log(trSeq%2);
if(trSeq%2==0)
{
$(this).parent().attr("class","even");
}
else
{
$(this).parent().attr("class","odd");
}
cls=null;
$(this).parent().attr("bSel","0");
}
return false;
}
if($(this).children("input").length > 0)
return false;
$(this).html("<input type='text' value='"+$(this).html()+"' size='10'>");
$(this).parent().attr('height', 50);
});
}
function a(){
console.log(1);
}
$(function(){
//$('body').everyTime('1s',a);
rebind();
$("#del2").click(function(){
//删除指定行（第二行）
$("#table1 tr:gt(0):eq(1)").remove();
rebind();
return false;
})
$("#del_sel").click(function(){
//删除选中行
//$("#table1 tr:gt(0):eq(1)").remove();
//rebind();
$("[bSel=1]").remove();
rebind();
return false;
})
$("#ins2").click(function(){
var newRow = "<tr class=\"odd\"><td>"+(GetMaxID()+1)+"</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table1 tr:gt(0):eq(1)").after(newRow);
rebind();
return false;
})
$("#ins_last").click(function(){
var newRow = "<tr class=\"odd\"><td>"+(GetMaxID()+1)+"</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table1 tr:last").after(newRow);
rebind();
return false;
})
$(document).click(function(e) {
var _con = $('#table1'); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0) {
//alert("点击非目标区");
var input_val = "";
$("#table1 tr").each(function(rowIndex) {
if(rowIndex==0)
return;
var lie = GetLie();
//alert(rowIndex);
input_val = $(this).children('td').eq(0).text();
for(var i=0;i<lie;i++)
{
//td内的文本
var vi = $(this).children('td').eq(i);
if(vi.children("input").length > 0)
{
//console.log(vi.children("input").val());
input_val = input_val+","+vi.children("input").val();
console.log("vi = "+vi.html());
vi.html(vi.children("input").val());
}
}
console.log(input_val);
$(this).attr('height', 25);
})
//if(input_val!="")
//alert(input_val);
}
});
})
</script>
</head>
...全文
请发表友善的回复…
发表回复
我看你有戏 2020-11-18
- 打赏
- 举报
太长放不下,分两个帖子
<body>
<div>
<button id="del2">删除第二行</button>
<button id="del_sel">删除选中</button>
<button id="ins2">插入第二行后</button>
<button id="ins_last">插入新行</button>
</div>
<table id="table1">
<tr>
<th style="width: 160px;">表头一</th>
<th style="width: 160px;">表头二 </th>
<th style="width: 160px;">表头三</th>
<th style="width: 160px;">表头四</th>
<th style="width: 160px;">表头五</th>
</tr>
<tr>
<td>1</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
<td>第一行第五列</td>
</tr>
<tr>
<td>2</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
<td>第二行第五列</td>
</tr>
<tr>
<td>3</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
<td>第三行第五列</td>
</tr>
<tr>
<td>4</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
<td>第四行第五列</td>
</tr>
</table>
</body>
</html>
