1. Introducir una definición de estilo en la página
<estilo>
.LockHeadtable {comportamiento: url (/oblog312/lockheadtable.htc)}
</style>
2. Agregue la declaración "class =" Lockheadtable "" a la definición de la tabla que necesita bloquear el encabezado de fila y columna. Otros parámetros incluyen
Rowheadnum = "recuento de filas bloqueadas"
Colheadnum = "número de columna bloqueada"
Rowheadstyle = "Línea de estilo de cabeza"
Colheadstyle = "Lista de estilo de encabezado"
RowStyle = "Línea estilo 1 | Estilo de línea 2 | ... | Estilo de línea N"
Focusstyle = "El estilo cuando obtienes el enfoque del mouse"
3. Al hacer clic en el título de la fila, puede ordenar los datos.
Aviso:
Al usar este componente, las celdas en los encabezados de la tabla de filas no pueden cruzar filas
ejemplo:
<TableClass = "Lockheadtable" Rowheadnum = 3Colheadnum = 1RowheadStyle = "Background:#F7F7F7; Color: Black;" ColheadStyle = "Fondo:#F7F7F7; Color: Black;" RowStyle = "Fondo:#F7F7F7; color: Negro;" RowStyle = "Background de fondo : #Ffffff; color: negro; | fondo:#f7f7f7; color: negro; "focusstyle =" fondo: verde; color: blanco; "width =" 1500 "border =" 1 "celular =" 3 "cellPacing =" 0 "align =" centro ">
Código fuente:
Lockheadtable.htc (programa de componentes)
<Public: componente>
<Public: Propertyname = "Rowheadnum"/>
<Public: Propertyname = "Colheadnum"/>
<Public: Propertyname = "Rowheadstyle"/>
<Public: Propertyname = "colheadstyle"/>
<Public: Propertyname = "RowStyle"/>
<Public: Propertyname = "FocusStyle"/>
<script>
// Inicialización
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 ("|"));
// Establecer el encabezado de la tabla de filas
Vari, J, RowItem, CellItem;
rowhead = element.clonenode (true);
para (i = 0; i <rowheadnum; i ++) {
rowitem = element.rows (i);
rowitem.style.csstext = 'Z-Index: 10; posición: relativo; top: expresion (this.offsetparent.scrolltop);'+rowheadstyle;
}
// Establecer el encabezado de la lista
para (i = 0; i <element.rows.length; i ++) {
rowitem = element.rows (i);
if (i> = rowheadnum) {
rowitem.style.csstext = "Position: Relative;"+ArrrowStyle [(I-Rowheadnum)%ArrrowStyle.Length];
if (focusstyle! = null) {
RowItem.OnMouseOver = function () {this.style.csstext = "posición: relativo;"+focusstyle;}