html表格高度自动调整,Jquery实战---table高度自动调整(示例代码)

1

2

3

4

5

6

7

8

Document

9

10

11

12

13 table{

14 border:1px solid blue;

15 }

16

17 .tdright,18 .tdleft{

19 border:1px solid red;

20 }

21

22 *{

23 box-sizing:border-box;

24 }

25

26

27

28

29

30

31

32

33 tdleft高度测试
tdleft高度测试
tdleft高度测试
tdleft高度测试
tdleft高度测试
tdleft高度测试

34

35

36

table1

37

table1

38

table1

39

table1

40

table1

41

table1

42

table1

43

44

45

table2

46

table2

47

table2

48

table2

49

table2

50

table2

51

table2

52

53

54

自动调整高度

55

自动调整高度

56

自动调整高度

57

自动调整高度

58

自动调整高度

59

自动调整高度

60

自动调整高度

61

62

63

64

65

66 tdleft高度测试
tdleft高度测试
tdleft高度测试
tdleft高度测试

67

68

69

table1

70

table1

71

table1

72

table1

73

table1

74

table1

75

table1

76

77

78

table2

79

table2

80

table2

81

table2

82

table2

83

table2

84

table2

85

86

87

自动调整高度

88

自动调整高度

89

自动调整高度

90

自动调整高度

91

自动调整高度

92

自动调整高度

93

自动调整高度

94

95

96

97

98

99

100

101

102

103

104 $(function() {105 var$rows=$(".table_body>tbody>tr");//获取最外侧table所有行的jquery对象

106 varrowslen=$rows.length;//最外侧table的总行数

107 //alert(rowslen);

108 for(vari= 0; i

109 var$rowspcific=$($rows.get(i));//获取每一行的jquery对象

110 vartdleft_height=$rowspcific.find(".tdleft").height();//左侧td的高度

111 //alert("tdleft_height=" + tdleft_height);

112 var$tables=$rowspcific.find(".tdright table:not(.table4Supplement)");//右侧td中所有小table的jquery对象

113 varlen=$tables.length;114 //alert("right tables len=" + len);

115 varheight_total= 0;116 for(varj= 0; j

117 varheight=$($tables.get(j)).height();118 height_total+=height;119 }120 //alert("height_total=" + height_total);

121 $("#text").text("height_total=" +height_total);122 varhigh_differ=tdleft_height-height_total;//两边高度差

123 if(high_differ> 0) {//高度差大于0，则补齐高度差，table4Supplement是专门为补齐高度增加的table。

124 $rowspcific.find(".table4Supplement").height(high_differ);125 }126 }127

128

129 })130

131

132

133