设置一周每天所占的百分比特效，可拖，可填，可回车
设置一周每天所占的百分比特效，可拖，可填，可回车。这是第三版，把代码封装成jquery一个插件，新增回车改变修改功能和默认值功能。另，重写了算法，计算百分比和宽度更合理。
效果如下：
|
% 周一 |
% 周二 |
% 周三 |
% 周四 |
% 周五 |
% 周六 |
% 周日 |
该死nbsp;的，上传到博客完后，我的空td里都加个nbsp;,使线条变粗，看本地测试截图，多苗条啊
效果预览 http://myaccp.com/js/table.html
代码分享
<script type="text/javascript">
/**
* setWeek with 逐月 2013-7-12 zhuyuelee@163.com
*
*/
jQuery.fn.setWeek = function(options) {
var table = $(this);
options = jQuery.extend({
defaultValue: [22, 24, 12, 10, 15, 9, 8]
},
options);
var rate = (table.width() - 30 * 7 - 2 * parseInt(table.css("border-width")) - 6 * parseInt(table.find(".boundary").width())) / 100; //百分一所点像素数
table.find("td[class!=boundary]").each(function(i) {
var td = $(this);
td.children("p").children("label").text(options.defaultValue[i]);
td.children("p").children(":hidden").val(options.defaultValue[i]);
td.width(rate * options.defaultValue[i] + 30);
});
// 鼠标拖动改大小...
table.find(".boundary").mousedown(function(ex) {
var curBoun = $(this);
table.find(".focus").removeClass("focus"); //移除其它
curBoun.addClass("focus");
var prev = $(".focus").prev();
var next = $(".focus").next();
var pw = prev.width();
var nw = next.width();
//计算两部分总和
var totalP = parseFloat(prev.children("p").children(":hidden").val()) + parseFloat(next.children("p").children(":hidden").val())
table.mousemove(function(e) {
var prevNewWidth = pw + e.pageX - ex.pageX;
var nextNewWidth = nw - e.pageX + ex.pageX;
if (prevNewWidth < 30 || nextNewWidth < 30) {//最少宽度为30
return;
}
prev.width(prevNewWidth);
next.width(nextNewWidth);
var pr = ((prevNewWidth - 30) / rate).toFixed(1);
//确保最小为0，最大不超过原来值的总和
if (pr > totalP) {
pr = totalP;
} else if (pr < 0) {
pr = 0;
}
if (nextNewWidth <= 30) {
pr = totalP;
}
prev.children("p").children("label").text(pr);
prev.children("p").children(":hidden").val(pr);
next.children("p").children("label").text((totalP - pr).toFixed(1));
next.children("p").children(":hidden").val((totalP - pr).toFixed(1));
});
table.mouseup(function(e) {
table.off();
table.find(".focus").removeClass("focus"); //移除其它
});
});
var loseFous = function(label) {
var newVal = parseFloat(label.children(":input").val()).toFixed(1); //新值
if (newVal >= 0 && newVal <= 100) {
var chageTd = label.parent().parent();
label.html(label.children(":input").val()); //input还原为百分比
var oldVal = parseFloat(label.prev(":hidden").val()); //原值
var nextTd;
if (chageTd.next().size() > 0) {
nextTd = chageTd.next().next();
} else {
nextTd = $("#tab_week td").first();
}
chageTd.children("p").children(":hidden").val(newVal);
var nextVal = parseFloat(nextTd.children("p").children(":hidden").val());
if (newVal < oldVal) {//值改小
chageTd.css("width", "auto");
nextTd.width(nextTd.width() + parseInt((oldVal - newVal) * rate));
nextTd.children("p").children(":hidden").val(nextVal + oldVal - newVal);
nextTd.children("p").children("label").html(nextVal + oldVal - newVal);
if (chageTd.width() < 30) {
chageTd.width(30);
} else {
chageTd.width(chageTd.width());
}
} else if (newVal > oldVal) {//值变大
var addVal = newVal - oldVal;
chageTd.css("width", "auto");
for (var i = 1; i <= 6; i++) {
if (nextVal > 0) {
if (addVal >= nextVal) {
nextTd.width(30);
nextTd.children("p").children(":hidden").val("0");
nextTd.children("p").children("label").html("0");
addVal = addVal - nextVal;
} else {
nextTd.width(parseInt(nextVal - addVal) * rate);
if (nextTd.width() < 30) {
nextTd.width(30);
}
nextTd.children("p").children(":hidden").val(nextVal - addVal);
nextTd.children("p").children("label").html(nextVal - addVal);
break;
}
}
if (nextTd.next().size() > 0) {
nextTd = nextTd.next().next();
} else {
nextTd = $("#tab_week td").first();
}
nextVal = parseFloat(nextTd.children("p").children(":hidden").val());
}
if (chageTd.width() < 30) {
chageTd.width(30);
} else {
chageTd.width(chageTd.width());
}
}
} else {
label.html(label.prev(":input").val());
}
};
//鼠标经过填写具体的值
table.find("label").hover(//排除周日
function() {
$(this).html("<input type='text' style='width:24px;' value='" + $.trim($(this).html()) + "' />");
$(this).children(":input").select();
$(this).children(":input").keydown(function(event) {
if (event.keyCode == 13) {
loseFous($(this).parent("label"));
$(this).off();
return false;
}
});
},
function() {
loseFous($(this));
}
);
};
</script>
代码写了两遍，第一遍的代码比较冗杂，就舍弃了，这是第二次写的代码，代码量只有第一次的三分之二，运行效果也够健壮，就拿出来给大家分享了。测试时间有限，如有bug，还请留言指出。
如今代码是第三遍代码
下面是html代码
<table cellpadding="0" cellspacing="0" id="tab_week">
<tr>
<td>
<p>
<input type="hidden" name="hid_mon" value="14" />
<label>
0</label>%</p>
周一
</td>
<td class="boundary"><hr />
</td>
<td>
<p>
<input type="hidden" name="hid_tues" value="14" />
<label>
0</label>%</p>
周二
</td>
<td class="boundary"><hr />
</td>
<td>
<p>
<input type="hidden" name="hid_wed" value="14" />
<label>
0</label>%</p>
周三
</td>
<td class="boundary"><hr />
</td>
<td>
<p>
<input type="hidden" name="hid_thur" value="14" />
<label>
0</label>%</p>
周四
</td>
<td class="boundary"><hr />
</td>
<td>
<p>
<input type="hidden" name="hid_fri" value="14" />
<label>
0</label>%</p>
周五
</td>
<td class="boundary">
</td>
<td>
<p>
<input type="hidden" name="hid_sat" value="15" />
<label>
0</label>%</p>
周六
</td>
<td class="boundary"><hr />
</td>
<td>
<p>
<input type="hidden" name="hid_sun" value="15" />
<label>
0</label>%</p>
周日
</td>
</tr>
</table>
CSS代码
<style type="text/css">
*
{
font-size: 12px;
}
table
{
border: solid 2px #000000;
width: 720px;
height: 120px;
}
td
{
overflow: hidden;
text-align: center;
}
td p
{
padding: 0px;
margin: 0px;
}
td.boundary
{
background:#7f7f7f; border:none; width:2px; height:100%;cursor: e-resize;
}
td.boundary hr{ background:#7f7f7f; border:none; width:2px; height:100%;cursor: e-resize;}
td.focus
{
background: #FF6600;
}
td.focus hr
{
background: #FF6600;
}
</style>
代码调用方法，在代码分享下面的，如测试出bug，还望指出，谢谢
