我锁定的是表头和前两列,第二列的复选框在我锁定之前是点击之后改变整行的背景颜色。
然后现在锁定了点击改变背景颜色就不行了。
只要进了这个js ,之前的就失效了。各位前辈,帮帮忙,拜托了!!!!
应该是另外克隆了dom对象,不是原来的了,所以你之前绑定的事件无效了,你用的这个是居于supperTable打包成jquery的?没找到居于jquery的,有一个需要注册下载太麻烦就不弄了
将代码和生成的客户端html代码打包发上来看看
这是代码
<script type="text/javascript">
$(document).ready(function () {
$(":checkbox").click(function () {
if ($(this).attr("checked")) {
var _classname = $(this).parents("tr").attr('class');
$(this).parents("tr").addClass("row_selected");
if (_classname == "row_gray MouseOver") {
$(this).parents("tr").removeClass("row_gray");
$(this).parents("tr").addClass("row_selected");
$(this).parents("tr").addClass("MouseOver_gray");
}
$(this).attr("checked");
if (!$("#cbxSelect").attr("checked")) {
$("#cbxSelect").attr("checked", true);
}
} else {
$(this).parents("tr").removeClass("row_selected")
$(this).attr("checked");
if ($("#cbxSelect").attr("checked")) {
if ($('input:checked').length == 1) {
$("#cbxSelect").attr("checked", false);
}
}
$(this).parents("tr.MouseOver_gray").attr("class", "row_gray");
}
});
$("#cbxSelect").click(function () {
if (!$("#cbxSelect").attr("checked")) {
$("input:checkbox").attr("checked", false, $(this).attr("checked", false));
$("table tr").removeClass("row_selected");
$(".MouseOver_gray").attr("class", "row_gray");
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("#tableFirst").toSuperTable({ width: "99%", height: "505px", fixedCols: 2 })
});
</script>
<table width="1700" border="0" cellspacing="1" cellpadding="1" class="tbl_inquiry" id="tableFirst" >
<tr style="font-size:12px;" id="thead">
<th class="head" width="20"> </th>
<th class="head center" style="width: 20px;">
<input type="checkbox" id="cbxSelect" name="cbxSelect"/></th>
<th class="head left" width="150"><strong>单据编号</strong></th>
<th class="head right" width="80"><strong>订单日期</strong></th>
<th class="head " width="130" style="border-color:#bbb;"><strong>公司名称</strong></th>
<th class="head " width="90"><strong>型 号</strong></th>
<th class="head" width="70"><strong>品 牌</strong></th>
<th class="head center" width="60"><strong>数量</strong></th>
<th class="head" width="85"><strong>销售单价(USD)</strong></th>
<th class="head" width="90"><strong>美金总额</strong></th>
<th class="head center" width="40"><strong>汇率</strong></th>
<th class="head" width="90"><strong>折算RMB</strong></th>
<th class="head center" width="60"><strong>进货数量</strong></th>
<th class="head " width="75"><strong>采购价(RMB)</strong></th>
<th class="head " width="90"><strong>金额</strong></th>
<th class="head " width="50"><strong>加工/运费</strong></th>
<th class="head " width="90"><strong>利润(RMB)</strong></th>
<th class="head center" width="50"><strong>销售员</strong><br />
</th>
<th class="head center" width="50"><strong>采购员</strong></th>
<th class="head" width="200"><strong>备注</strong></th>
</tr>
<asp:Repeater ID="rpOrderReturn" runat="server">
<ItemTemplate>
<asp:Literal runat="server" ID="LitTr"></asp:Literal>
<td style="display:none;">
<asp:Literal ID="litID" Text='<%# Eval("ID") %>' runat="server" />
</td>
<td class="center"><%#Eval("RowNumber") %></td>
<td class="center"><asp:CheckBox ID="cbxSelect" runat="server"/></td>
<td><asp:Literal runat="server" ID="LitOrderNo" Text='<%#Eval("OrderNo") %>'></asp:Literal></td>
<td style="white-space: nowrap; cursor: pointer;" title="<%#Eval("OrderTime") %>">
<asp:Literal runat="server" ID="LitOrderTime" Text='<%#Eval("OrderTime") %>'></asp:Literal></td>
<td style="white-space: nowrap; cursor: pointer;" title="<%#Eval("DeliveryCompanyName") %>">
<asp:Literal runat="server" ID="LitDeliveryCompanyName" Text='<%#Eval("DeliveryCompanyName") %>'></asp:Literal></td>
<td style="white-space: nowrap;">
<asp:Literal runat="server" ID="LitRequestNo" Text='<%#Eval("RequestPartNo") %>'></asp:Literal></td>
<td style="white-space: nowrap; cursor: pointer;" title="<%#Eval("RequestBrand") %>">
<asp:Literal runat="server" ID="LitRequestBrand" Text='<%#Eval("RequestBrand") %>'></asp:Literal></td>
<td class="center">
<asp:Literal runat="server" ID="LitRequestQty" Text='<%#Eval("ProductQty") %>'></asp:Literal></td>
<td>
<asp:Literal runat="server" ID="LitRequestPrice" Text='<%#Eval("RequestPrice") %>'></asp:Literal></td>
<td><span style="color: Green;">
<asp:Literal runat="server" ID="LitUsdCount"></asp:Literal></span></td>
<td class="center">
<asp:Literal runat="server" ID="Litrate"></asp:Literal></td>
<td><span style="color: Green;">
<asp:Literal runat="server" ID="LitRMB"></asp:Literal></span></td>
<td class="center">
<asp:Literal runat="server" ID="LitOrderRequestQty" Text='<%#Eval("ProductQty") %>'></asp:Literal></td>
<td>
<asp:Literal runat="server" ID="LitCostPrice" Text='<%#Eval("CostPrice") %>'></asp:Literal></td>
<td><span style="color: Green;">
<asp:Literal runat="server" ID="LitRMBCount"></asp:Literal></span></td>
<td>
<asp:Literal runat="server" ID="LitDeliveryCharge" Text='<%#Eval("OtherCharge") %>'></asp:Literal></td>
<td><span style="color: green;">
<asp:Literal runat="server" ID="LitPrice"></asp:Literal></span></td>
<td class="center">
<asp:Literal runat="server" ID="LitSalesID" Text='<%#Eval("SalesID")%>'></asp:Literal></td>
<td class="center">
<asp:Literal runat="server" ID="LitAdminLoginPurchaseID" Text='<%#Eval("AdminLoginPurchaseID") %>'></asp:Literal></td>
<td>
<asp:Literal runat="server" ID="LitSalesRemark" Text='<%#Eval("SalesRemark") %>'></asp:Literal></td>
</tr>
</ItemTemplate>
</asp:Repeater>
<tr>
<td colspan="9" style="text-align: center; color: red;"><strong>合计:</strong></td>
<td><span style="color: red;">
<asp:Literal runat="server" ID="LitUsdPrice"></asp:Literal></span></td>
<td> </td>
<td><span style="color: red;">
<asp:Literal runat="server" ID="LitRmbPrice"></asp:Literal></span></td>
<td> </td>
<td> </td>
<td><span style="color: red;">
<asp:Literal runat="server" ID="LitPriceCount"></asp:Literal></span></td>
<td><span style="color: red;">
<asp:Literal runat="server" ID="LitJia"></asp:Literal></span></td>
<td><span style="color: red;">
<asp:Literal runat="server" ID="LitCountRmb"></asp:Literal></span></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
jquery.superTable.js 代码
(function ($) {
$.fn.extend(
{
toSuperTable: function (options) {
var setting = $.extend(
{
width: "640px", height: "320px",
margin: "10px", padding: "0px",
overflow: "hidden", colWidths: undefined,
fixedCols: 0, headerRows: 1,
onStart: function () { },
onFinish: function () { },
cssSkin: "sSky"
}, options);
return this.each(function () {
var q = $(this);
var id = q.attr("id");
q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");
var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];
var container = $("#" + id + "_box");
for (var p in setting) {
if ($.inArray(p, nonCssProps) == -1) {
container.css(p, setting[p]);
delete setting[p];
}
}
var mySt = new superTable(id, setting);
});
}
});
})(jQuery);
superTables.js 代码
var superTable = function (tableId, options) {
/////* Initialize */
options = options || {};
this.cssSkin = options.cssSkin || "";
this.headerRows = parseInt(options.headerRows || "1");
this.fixedCols = parseInt(options.fixedCols || "0");
this.colWidths = options.colWidths || [];
this.initFunc = options.onStart || null;
this.callbackFunc = options.onFinish || null;
this.initFunc && this.initFunc();
/////* Create the framework dom */
this.sBase = document.createElement("DIV");
this.sFHeader = this.sBase.cloneNode(false);
this.sHeader = this.sBase.cloneNode(false);
this.sHeaderInner = this.sBase.cloneNode(false);
this.sFData = this.sBase.cloneNode(false);
this.sFDataInner = this.sBase.cloneNode(false);
this.sData = this.sBase.cloneNode(false);
this.sColGroup = document.createElement("COLGROUP");
this.sDataTable = document.getElementById(tableId);
this.sDataTable.style.margin = "0px"; /* Otherwise looks bad */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin;
}
if (this.sDataTable.getElementsByTagName("COLGROUP").length > 0) {
this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]); /* Making our own */
}
this.sParent = this.sDataTable.parentNode;
this.sParentHeight = this.sParent.offsetHeight;
this.sParentWidth = this.sParent.offsetWidth;
/////* Attach the required classNames */
this.sBase.className = "sBase";
this.sFHeader.className = "sFHeader";
this.sHeader.className = "sHeader";
this.sHeaderInner.className = "sHeaderInner";
this.sFData.className = "sFData";
this.sFDataInner.className = "sFDataInner";
this.sData.className = "sData";
/////* Clone parts of the data table for the new header table */
var alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
this.sHeaderTable = this.sDataTable.cloneNode(false);
if (this.sDataTable.tHead) {
alpha = this.sDataTable.tHead;
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tHead;
} else {
alpha = this.sDataTable.tBodies[0];
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tBodies[0];
}
alpha = alpha.rows;
for (i = 0; i < this.headerRows; i++) {
beta.appendChild(alpha[i].cloneNode(true));
}
this.sHeaderInner.appendChild(this.sHeaderTable);
if (this.fixedCols > 0) {
this.sFHeaderTable = this.sHeaderTable.cloneNode(true);
this.sFHeader.appendChild(this.sFHeaderTable);
this.sFDataTable = this.sDataTable.cloneNode(true);
this.sFDataInner.appendChild(this.sFDataTable);
}
/////* Set up the colGroup */
alpha = this.sDataTable.tBodies[0].rows;
for (i = 0, j = alpha.length; i < j; i++) {
clean = true;
for (k = 0, m = alpha[i].cells.length; k < m; k++) {
if (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
i += alpha[i].cells[k].rowSpan - 1;
clean = false;
break;
}
}
if (clean === true) break; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
}
cleanRow = (clean === true) ? i : 0; /* Use this row index to calculate the column widths */
for (i = 0, j = alpha[cleanRow].cells.length; i < j; i++) {
if (i === this.colWidths.length || this.colWidths[i] === -1) {
this.colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
}
}
for (i = 0, j = this.colWidths.length; i < j; i++) {
this.sColGroup.appendChild(document.createElement("COL"));
this.sColGroup.lastChild.setAttribute("width", this.colWidths[i]);
}
this.sDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sDataTable.firstChild);
this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sHeaderTable.firstChild);
if (this.fixedCols > 0) {
this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sFDataTable.firstChild);
this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sFHeaderTable.firstChild);
}
/////* Style the tables individually if applicable */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin + "-Main";
this.sHeaderTable.className += " " + this.cssSkin + "-Headers";
if (this.fixedCols > 0) {
this.sFDataTable.className += " " + this.cssSkin + "-Fixed";
this.sFHeaderTable.className += " " + this.cssSkin + "-FixedHeaders";
}
}
/////* Throw everything into sBase */
if (this.fixedCols > 0) {
this.sBase.appendChild(this.sFHeader);
}
this.sHeader.appendChild(this.sHeaderInner);
this.sBase.appendChild(this.sHeader);
if (this.fixedCols > 0) {
this.sFData.appendChild(this.sFDataInner);
this.sBase.appendChild(this.sFData);
}
this.sBase.appendChild(this.sData);
this.sParent.insertBefore(this.sBase, this.sDataTable);
this.sData.appendChild(this.sDataTable);
/////* Align the tables */
var sDataStyles, sDataTableStyles;
this.sHeaderHeight = this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead) ? 0 : this.headerRows].offsetTop;
sDataTableStyles = "margin-top: " + (this.sHeaderHeight * -1) + "px;";
sDataStyles = "margin-top: " + this.sHeaderHeight + "px;";
sDataStyles += "height: " + (this.sParentHeight - this.sHeaderHeight) + "px;";
if (this.fixedCols > 0) {
/* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
this.sFHeaderWidth = this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;
if (window.getComputedStyle) {
alpha = document.defaultView;
beta = this.sDataTable.tBodies[0].rows[0].cells[0];
if (navigator.taintEnabled) { /* If not Safari */
this.sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width")) / 2);
} else {
this.sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width"));
}
} else if (/*@cc_on!@*/0) { /* Internet Explorer */
alpha = this.sDataTable.tBodies[0].rows[0].cells[0];
beta = [alpha.currentStyle["borderRightWidth"], alpha.currentStyle["borderLeftWidth"]];
if (/px/i.test(beta[0]) && /px/i.test(beta[1])) {
beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
this.sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
}
}
/* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
if (window.opera) {
this.sFData.style.height = this.sParentHeight + "px";
}
this.sFHeader.style.width = this.sFHeaderWidth + "px";
sDataTableStyles += "margin-left: " + (this.sFHeaderWidth * -1) + "px;";
sDataStyles += "margin-left: " + this.sFHeaderWidth + "px;";
sDataStyles += "width: " + (this.sParentWidth - this.sFHeaderWidth) + "px;";
} else {
sDataStyles += "width: " + this.sParentWidth + "px;";
}
this.sData.style.cssText = sDataStyles;
this.sDataTable.style.cssText = sDataTableStyles;
/////* Set up table scrolling and IE's onunload event for garbage collection */
(function (st) {
if (st.fixedCols > 0) {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px";
};
} else {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
};
}
if (/*@cc_on!@*/0) { /* Internet Explorer */
window.attachEvent("onunload", function () {
st.sData.onscroll = null;
st = null;
});
}
})(this);
this.callbackFunc && this.callbackFunc();
};
css
.sBase {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* HEADERS */
.sHeader {
position: absolute;
z-index: 3;
background-color: #ffffff;
}
.sHeaderInner {
position: relative;
}
.sHeaderInner table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
}
/* HEADERS - FIXED */
.sFHeader {
position: absolute;
z-index: 4;
overflow: hidden;
}
.sFHeader table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
}
/* BODY */
.sData {
position: absolute;
z-index: 2;
overflow: auto;
background-color: #ffffff;
}
.sData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
}
/* BODY - FIXED */
.sFData {
position: absolute;
z-index: 1;
background-color: #ffffff;
}
.sFDataInner {
position: relative;
}
.sFData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
}
/*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables - Skin Classes
// Remove if not needed
/////////////////////////////////////////////////////////////////////////////////////////
*/
/* sDefault */
.sDefault {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sDefault th, .sDefault td {
border: 1px solid #cccccc;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDefault th {
background-color: #e5e5e5;
border-color: #c5c5c5;
}
.sDefault-Fixed {
background-color: #eeeeee;
border-color: #c5c5c5;
}
/* sSky */
.sSky {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sSky th, .sSky td {
border: 1px solid #9eb6ce;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sSky th {
background-color: #CFDCEE;
}
.sSky-Fixed {
background-color: #e4ecf7;
}
/* sOrange */
.sOrange {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sOrange th, .sOrange td {
border: 1px solid #cebb9e;
padding: 3px 6px 3px 4px;
white-space:normal;/*nowrap,normal*/
}
.sOrange th {
background-color: #ECD8C7;
}
.sOrange-Fixed {
background-color: #f7ede4;
}
/* sDark */
.sDark {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
color: #ffffff;
}
.sDark th, .sDark td {
border: 1px solid #555555;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDark th {
background-color: #000000;
}
.sDark-Fixed {
background-color: #222222;
}
.sDark-Main {
background-color: #333333;
}