Home Web Front-end JS Tutorial Several methods for fixing headers based on jquery_jquery

Several methods for fixing headers based on jquery_jquery

May 16, 2016 pm 06:11 PM

A: Use the JQuery UI plug-in, replace the table with DIV, overflow-y:hidden to achieve scrolling, and make thead absolutely positioned to achieve a fixed purpose. The method is as follows:

Copy code The code is as follows:

(function($){
$.chromatable = {
defaults: {
width: "900px",
height: "300px",
scrolling: "yes"
}
};
$.fn.chromatable = function(options){
var options = $.extend({ }, $.chromatable.defaults, options);
return this.each(function(){
var $this = $(this);
var $uniqueID = $(this).attr(" ID") ("wrapper");
$(this).css('width', options.width).addClass("_scrolling");
$(this).wrap('<div class ="scrolling_outer"><div id="' $uniqueID '" class="scrolling_inner"></div></div>');
$(".scrolling_outer").css( {'position':'relative'});
$("#" $uniqueID).css(
{'border':'1px solid #CCCCCC',
'overflow-x':' hidden',
'overflow-y':'auto',
'padding-right':'17px'
});
$("#" $uniqueID).css('height ', options.height);
$("#" $uniqueID).css('width', options.width);
$(this).before($(this).clone().attr ("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute ',
'border':'none',
'border-bottom':'1px solid #CCC',
'top':'1px'
}));
$ ('._thead').children('tbody').remove();
$(this).each(function( $this ){
if (options.width == "100%" || options.width == "auto") {
$("#" $uniqueID).css({'padding-right':'0px'});
}
if (options.scrolling = = "no") {
$("#" $uniqueID).before('<a href="#" class="expander" style="width:100%;">Expand table</a> ;');
$("#" $uniqueID).css({'padding-right':'0px'});
$(".expander").each(
function(int ){
$(this).attr("ID", int);
$( this ).bind ("click",function(){
$("#" $uniqueID).css ({'height':'auto'});
$("#" $uniqueID " ._thead").remove();
$(this).remove();
});
});
$("#" $uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden");
}
} );
$curr = $this.prev();
$("thead:eq(0)>tr th",this).each( function (i) {
$("thead :eq(0)>tr th:eq(" i ")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
};
function resizer($this) {
$curr = $this.prev();
$("thead:eq(0)>tr th", $this). each( function (i) {
$("thead:eq(0)>tr th:eq(" i ")", $curr).width( $(this).width());
});
};
})(jQuery);

The page is called as follows:
Copy code The code is as follows:

...
<script type="text/javascript" src="jquery-ui-min.js">< /script>
<script>
$(function(){
$("#yourTableID").chromatable({
width: "900px",
height: "400px" ,
scrolling: "yes"
});
});
</script>
...
<table id="yourTableID" width="100 %" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Check out this header</th>
<th>Look here's another one</th>
<th>Wow, look at me!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content goes in here</td>
<td> td>Maecenas tempus dictum libero</td>
</tr>
...
<tr>
<td>Quisque in wisi quis orci tincidunt fermentum</td>
<td>Mauris aliquet mattis metus</td>
<td>Etiam ante non leo egestas nonummy</td> ></table>


This method has good compatibility with IE and FF and is recommended.
B: Implemented using css filters, but FF does not support Microsoft’s stuff and is incompatible. The DOM is as follows:



Copy code
The code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<style type="text/css">
<!--
body,table, td, a {font :9pt;}
/*Key point: fixed row header style*/
.scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
z-index: 0;}
/*Key point: fixed header style*/
.scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2; height:20px ;}
/*Where rows and columns intersect*/
.scrollCR { z-index:3;}
/*div outline*/
.scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 500px; }
/*Line header centered*/
.scrollColThead td,.scrollColThead th
{ text-align: center ;}
/ *Row and column header background*/
.scrollRowThead,.scrollColThead td,.scrollColThead th
{background-color:EEEEEE; height:20px;}
/*Table lines*/
.scrolltable {
border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }
/*Cell lines, etc.*/
.scrolltable td,.scrollTable th{
border -left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; }
-->
</style>
<BODY>
<!--<div class="scrollDiv" id="scrollDiv">-->
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" > </th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
</tr>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" >h1</th>
<th class="scrollRowThead scrollCR">h2</th>
<th class="scrollRowThead scrollCR">h3</th>
<th class="scrollRowThead scrollCR">h4</th>
<th class="scrollRowThead scrollCR">h5</th>
<th class="scrollRowThead scrollCR">h6</th>
<th class="scrollRowThead scrollCR">h7</th>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox" value="checkbox">
a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox2" value="checkbox">
b</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td nowrap class="scrollRowThead" >
<input type="checkbox" name="checkbox3" value="checkbox">
c</td>
<td nowrap>单元格2</td>
<td nowrap>单元格3</td>
<td nowrap>单元格4</td>
<td nowrap>单元格5</td>
<td nowrap>单元格6</td>
<td nowrap>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5&lt ;/td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td> cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
<tr>
<td class="scrollRowThead " >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6&lt ;/td>
<td>Cell 7</td>
</tr>
<tr>
<td class="scrollRowThead" >
&lt ;input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</table>
</BODY>
</HTML>

C: The easiest way is of course to write two tables and use DIV's overflow-y:auto to achieve it. There is absolutely no problem with compatibility. The trouble lies in the alignment of the two tables. If you use a script to give the height, The onresize() method needs to be added. The DOM is as follows:
Copy code The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0px;padding:0px;}
body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-serif;}
body,td,div{font-size:12px;color:#333; line-height:150%;-webkit-text-size-adjust:none;}
select{ font-size:12px;}
a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:12px; }
a:link, a:visited {text-decoration:none;color:#333;}
a:hover, a:active {text-decoration:underline;color:#F00;}
ul,li,ol{list-style-type:none;}img {border:none;}
html{ overflow:hidden;}
.header{ width:1000px; margin:auto; height:40px; background:#ccc;}
.mainer{ width:1000px; margin:auto; height:auto; overflow-y:scroll;overflow-x:hidden;}
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function OnResize() {
$(".mainer").height($(window).height() - 40);
}
$(function () {
onreszie();
});
</script>
</head>
<body onResize="OnResize()">
<div class="header">
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">
<thead>
<tr >
<th > </th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
</tr>
<tr >
<th >h1</th>
<th >h2</th>
<th >h3</th>
<th >h4</th>
<th >h5</th>
<th >h6</th>
<th >h7</th>
</tr>
</thead>
</table>
</div>
<div class="mainer">
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">
<tbody>
<tr>
<td >
<input type="checkbox" name="checkbox" value="checkbox">
a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox2" value="checkbox">
b</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td nowrap >
<input type="checkbox" name="checkbox3" value="checkbox">
c</td>
<td nowrap>单元格2</td>
<td nowrap>单元格3</td>
<td nowrap>单元格4</td>
<td nowrap>单元格5</td>
<td nowrap>单元格6</td>
<td nowrap>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox" value="checkbox">
a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox2" value="checkbox">
b</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td nowrap >
<input type="checkbox" name="checkbox3" value="checkbox">
c</td>
<td nowrap>单元格2</td>
<td nowrap>单元格3</td>
<td nowrap>单元格4</td>
<td nowrap>单元格5</td>
<td nowrap>单元格6</td>
<td nowrap>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Sometimes the dumbest The method may also be the simplest and best method. The compatibility written in this way is absolutely safe and the flexibility is good.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

Custom Google Search API Setup Tutorial

Example Colors JSON File Example Colors JSON File Mar 03, 2025 am 12:35 AM

Example Colors JSON File

8 Stunning jQuery Page Layout Plugins 8 Stunning jQuery Page Layout Plugins Mar 06, 2025 am 12:48 AM

8 Stunning jQuery Page Layout Plugins

10 jQuery Syntax Highlighters 10 jQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 jQuery Syntax Highlighters

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

Build Your Own AJAX Web Applications

What is 'this' in JavaScript? What is 'this' in JavaScript? Mar 04, 2025 am 01:15 AM

What is 'this' in JavaScript?

10  JavaScript & jQuery MVC Tutorials 10 JavaScript & jQuery MVC Tutorials Mar 02, 2025 am 01:16 AM

10 JavaScript & jQuery MVC Tutorials

See all articles