مكونات الجدول التي قفل صف ورؤوس الأعمدة

1. تقديم تعريف نمط في الصفحة

<style>

.lockheadtable {السلوك: url (/Oblog312/lockheadtable.htc)}

</style>

2. أضف العبارة "class =" lockheadtable "إلى تعريف الجدول الذي يحتاج إلى قفل الصف ورأس العمود. تشمل المعلمات الأخرى

rowheadnum = "عدد الصفوف المقفلة"

colheadnum = "رقم العمود المقفلة"

Rowheadstyle = "نمط رأس الخط"

Colheadstyle = "قائمة رأس القائمة"

ROWSTYLE = "Line Style 1 | Line Style 2 | ... | Line Style N"

FocusStyle = "النمط عندما تحصل على تركيز الماوس"

3. عند النقر على عنوان الصف ، يمكنك فرز البيانات.

يلاحظ:

عند استخدام هذا المكون ، لا يُسمح للخلايا في رؤوس جدول الصفوف بعبر الصفوف

مثال:

<tableclass = "lockheadtable" rowheadnum = 3colheadnum = 1RowheadStyle = "Background:#f7f7f7 ؛ color: black ؛" colheadstyle = "background:#f7f7f7 ؛ color: black ؛ : #ffffff ؛ اللون: أسود ؛ | الخلفية:#f7f7f7 ؛ اللون: أسود ؛ "focusStyle =" الخلفية: أخضر ؛ اللون: أبيض ؛ "width =" 1500 "border =" 1 "cellpadding =" 3 "cellpacing =" 0 "" align = "center">

رمز المصدر:

lockheadtable.htc (برنامج مكون)

<public: مكون>

<public: propertyName = "Rowheadnum"/>

<public: propertyName = "colheadnum"/>

<public: propertyName = "Rowheadstyle"/>

<public: propertyName = "Colheadstyle"/>

<public: propertyName = "rowstyle"/>

<public: propertyName = "FocusStyle"/>

<script>

// التهيئة

rowheadnum = (rowheadnum == null؟ 0: parseint (rowheadnum ، 10)) ؛

colheadnum = (colheadnum == null؟ 0: parseint (colheadnum ، 10)) ؛

rowheadstyle = (rowheadstyle == null؟ "": rowheadstyle) ؛

colheadstyle = (colheadstyle == null؟ "": colheadstyle) ؛

arrrowStyle = (rowstyle == null؟ newarray (""): rowstyle.split ("|")) ؛

// اضبط رأس جدول الصفوف

Vari ، J ، Rowitem ، CellItem ؛

rowhead = element.clonenode (true) ؛

لـ (i = 0 ؛ i <rowheadnum ؛ i ++) {

rowitem = element.rows (i) ؛

rowitem.style.csstext = 'z-index: 10 ؛ الموضع: النسبية ؛ الأعلى: التعبير (this.offsetParent.scrolltop) ؛'+rowheadstyle ؛

}

// اضبط رأس القائمة

لـ (i = 0 ؛ i <element.rows.length ؛ i ++) {

rowitem = element.rows (i) ؛

if (i> = rowheadnum) {

rowitem.style.csstext = "الموضع: النسبية ؛"+arrrowstyle [(i-rowheadnum) ٪ arrrowstyle.length] ؛

if (FocusStyle! = null) {

rowitem.onmouseover = function () {this.style.csstext = "الموضع: النسبية ؛"+FocusStyle ؛}