我有以下Javascript代码作为Javascript源文件包含在每个打印页面（由打印机）打印表头。我在代码片段中添加了table.js文件，以便将问题缩小。如果你想要table.js代码，请查看代码片段
script：table.js
(function() { // THIS FUNCTION IS REQUIRED.
if(/Firefox|MSIE/i.test(navigator.userAgent))
var formatForPrint = function(table) {
var noBreak = document.createElement("div")
, noBreakTable = noBreak.appendChild(document.createElement("div")).appendChild(table.cloneNode())
, tableParent = table.parentNode
, tableParts = table.children
, partCount = tableParts.length
, partNum = 0
, cell = table.querySelector("tbody > tr > td");
noBreak.className = "noBreak";
for(; partNum < partCount; partNum++) {
if(!/tbody/i.test(tableParts[partNum].tagName))
noBreakTable.appendChild(tableParts[partNum].cloneNode(true));
}
if(cell) {
noBreakTable.appendChild(cell.parentNode.parentNode.cloneNode()).appendChild(cell.parentNode.cloneNode(true));
if(!table.tHead) {
var borderRow = document.createElement("tr");
borderRow.appendChild(document.createElement("th")).colSpan="1000";
borderRow.className = "borderRow";
table.insertBefore(document.createElement("thead"), table.tBodies[0]).appendChild(borderRow);
}
}
tableParent.insertBefore(document.createElement("div"), table).style.paddingTop = ".009px";
tableParent.insertBefore(noBreak, table);
};
else
var formatForPrint = function(table) {
var tableParent = table.parentNode
, cell = table.querySelector("tbody > tr > td");
if(cell) {
var topFauxRow = document.createElement("table")
, fauxRowTable = topFauxRow.insertRow(0).insertCell(0).appendChild(table.cloneNode())
, colgroup = fauxRowTable.appendChild(document.createElement("colgroup"))
, headerHider = document.createElement("div")
, metricsRow = document.createElement("tr")
, cells = cell.parentNode.cells
, cellNum = cells.length
, colCount = 0
, tbods = table.tBodies
, tbodCount = tbods.length
, tbodNum = 0
, tbod = tbods[0];
for(; cellNum--; colCount += cells[cellNum].colSpan);
for(cellNum = colCount; cellNum--; metricsRow.appendChild(document.createElement("td")).style.padding = 0);
cells = metricsRow.cells;
tbod.insertBefore(metricsRow, tbod.firstChild);
for(; ++cellNum < colCount; colgroup.appendChild(document.createElement("col")).style.width = cells[cellNum].offsetWidth + "px");
var borderWidth = metricsRow.offsetHeight;
metricsRow.className = "metricsRow";
borderWidth -= metricsRow.offsetHeight;
tbod.removeChild(metricsRow);
tableParent.insertBefore(topFauxRow, table).className = "fauxRow";
if(table.tHead)
fauxRowTable.appendChild(table.tHead);
var fauxRow = topFauxRow.cloneNode(true)
, fauxRowCell = fauxRow.rows[0].cells[0];
fauxRowCell.insertBefore(headerHider, fauxRowCell.firstChild).style.marginBottom = -fauxRowTable.offsetHeight - borderWidth + "px";
if(table.caption)
fauxRowTable.insertBefore(table.caption, fauxRowTable.firstChild);
if(tbod.rows[0])
fauxRowTable.appendChild(tbod.cloneNode()).appendChild(tbod.rows[0]);
for(; tbodNum < tbodCount; tbodNum++) {
tbod = tbods[tbodNum];
rows = tbod.rows;
for(; rows[0]; tableParent.insertBefore(fauxRow.cloneNode(true), table).rows[0].cells[0].children[1].appendChild(tbod.cloneNode()).appendChild(rows[0]));
}
tableParent.removeChild(table);
}
else
tableParent.insertBefore(document.createElement("div"), table).appendChild(table).parentNode.className="fauxRow";
};
var tables = document.body.querySelectorAll("table.print")
, tableNum = tables.length;
for(; tableNum--; formatForPrint(tables[tableNum]));
})();
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}<input type="button" value="Print" onclick="printDiv('content')" />
<div id="content"><table><thead><tr><th>Serial Number</th><th>Number</th></tr></thead><tbody><tr><td>1</td><td>1000</td></tr><tr><td>2</td><td>1001</td></tr><tr><td>3</td><td>1002</td></tr><tr><td>4</td><td>1003</td></tr><tr><td>5</td><td>1004</td></tr><tr><td>6</td><td>1005</td></tr><tr><td>7</td><td>1006</td></tr><tr><td>8</td><td>1007</td></tr><tr><td>9</td><td>1008</td></tr><tr><td>10</td><td>1009</td></tr><tr><td>11</td><td>1010</td></tr><tr><td>12</td><td>1011</td></tr><tr><td>13</td><td>1012</td></tr><tr><td>14</td><td>1013</td></tr><tr><td>15</td><td>1014</td></tr><tr><td>16</td><td>1015</td></tr><tr><td>17</td><td>1016</td></tr><tr><td>18</td><td>1017</td></tr><tr><td>19</td><td>1018</td></tr><tr><td>20</td><td>1019</td></tr><tr><td>21</td><td>1020</td></tr><tr><td>22</td><td>1021</td></tr><tr><td>23</td><td>1022</td></tr><tr><td>24</td><td>1023</td></tr><tr><td>25</td><td>1024</td></tr><tr><td>26</td><td>1025</td></tr><tr><td>27</td><td>1026</td></tr><tr><td>28</td><td>1027</td></tr><tr><td>29</td><td>1028</td></tr><tr><td>30</td><td>1029</td></tr><tr><td>31</td><td>1030</td></tr><tr><td>32</td><td>1031</td></tr><tr><td>33</td><td>1032</td></tr><tr><td>34</td><td>1033</td></tr><tr><td>35</td><td>1034</td></tr><tr><td>36</td><td>1035</td></tr><tr><td>37</td><td>1036</td></tr><tr><td>38</td><td>1037</td></tr><tr><td>39</td><td>1038</td></tr><tr><td>40</td><td>1039</td></tr><tr><td>41</td><td>1040</td></tr><tr><td>42</td><td>1041</td></tr><tr><td>43</td><td>1042</td></tr><tr><td>44</td><td>1043</td></tr><tr><td>45</td><td>1044</td></tr><tr><td>46</td><td>1045</td></tr><tr><td>47</td><td>1046</td></tr><tr><td>48</td><td>1047</td></tr><tr><td>49</td><td>1048</td></tr><tr><td>50</td><td>1049</td></tr><tr><td>51</td><td>1050</td></tr><tr><td>52</td><td>1051</td></tr><tr><td>53</td><td>1052</td></tr><tr><td>54</td><td>1053</td></tr><tr><td>55</td><td>1054</td></tr><tr><td>56</td><td>1055</td></tr><tr><td>57</td><td>1056</td></tr><tr><td>58</td><td>1057</td></tr><tr><td>59</td><td>1058</td></tr><tr><td>60</td><td>1059</td></tr><tr><td>61</td><td>1060</td></tr><tr><td>62</td><td>1061</td></tr><tr><td>63</td><td>1062</td></tr><tr><td>64</td><td>1063</td></tr><tr><td>65</td><td>1064</td></tr><tr><td>66</td><td>1065</td></tr><tr><td>67</td><td>1066</td></tr><tr><td>68</td><td>1067</td></tr><tr><td>69</td><td>1068</td></tr><tr><td>70</td><td>1069</td></tr><tr><td>71</td><td>1070</td></tr><tr><td>72</td><td>1071</td></tr><tr><td>73</td><td>1072</td></tr><tr><td>74</td><td>1073</td></tr><tr><td>75</td><td>1074</td></tr><tr><td>76</td><td>1075</td></tr><tr><td>77</td><td>1076</td></tr><tr><td>78</td><td>1077</td></tr><tr><td>79</td><td>1078</td></tr><tr><td>80</td><td>1079</td></tr><tr><td>81</td><td>1080</td></tr><tr><td>82</td><td>1081</td></tr><tr><td>83</td><td>1082</td></tr><tr><td>84</td><td>1083</td></tr><tr><td>85</td><td>1084</td></tr><tr><td>86</td><td>1085</td></tr><tr><td>87</td><td>1086</td></tr><tr><td>88</td><td>1087</td></tr><tr><td>89</td><td>1088</td></tr><tr><td>90</td><td>1089</td></tr><tr><td>91</td><td>1090</td></tr><tr><td>92</td><td>1091</td></tr><tr><td>93</td><td>1092</td></tr><tr><td>94</td><td>1093</td></tr><tr><td>95</td><td>1094</td></tr><tr><td>96</td><td>1095</td></tr><tr><td>97</td><td>1096</td></tr><tr><td>98</td><td>1097</td></tr><tr><td>99</td><td>1098</td></tr><tr><td>100</td><td>1099</td></tr><tr><td>101</td><td>1100</td></tr><tr><td>102</td><td>1101</td></tr><tr><td>103</td><td>1102</td></tr><tr><td>104</td><td>1103</td></tr><tr><td>105</td><td>1104</td></tr><tr><td>106</td><td>1105</td></tr><tr><td>107</td><td>1106</td></tr><tr><td>108</td><td>1107</td></tr><tr><td>109</td><td>1108</td></tr><tr><td>110</td><td>1109</td></tr><tr><td>111</td><td>1110</td></tr><tr><td>112</td><td>1111</td></tr><tr><td>113</td><td>1112</td></tr><tr><td>114</td><td>1113</td></tr><tr><td>115</td><td>1114</td></tr><tr><td>116</td><td>1115</td></tr><tr><td>117</td><td>1116</td></tr><tr><td>118</td><td>1117</td></tr><tr><td>119</td><td>1118</td></tr><tr><td>120</td><td>1119</td></tr><tr><td>121</td><td>1120</td></tr><tr><td>122</td><td>1121</td></tr><tr><td>123</td><td>1122</td></tr><tr><td>124</td><td>1123</td></tr><tr><td>125</td><td>1124</td></tr><tr><td>126</td><td>1125</td></tr><tr><td>127</td><td>1126</td></tr><tr><td>128</td><td>1127</td></tr><tr><td>129</td><td>1128</td></tr><tr><td>130</td><td>1129</td></tr><tr><td>131</td><td>1130</td></tr><tr><td>132</td><td>1131</td></tr><tr><td>133</td><td>1132</td></tr><tr><td>134</td><td>1133</td></tr><tr><td>135</td><td>1134</td></tr><tr><td>136</td><td>1135</td></tr><tr><td>137</td><td>1136</td></tr><tr><td>138</td><td>1137</td></tr><tr><td>139</td><td>1138</td></tr><tr><td>140</td><td>1139</td></tr><tr><td>141</td><td>1140</td></tr><tr><td>142</td><td>1141</td></tr><tr><td>143</td><td>1142</td></tr><tr><td>144</td><td>1143</td></tr><tr><td>145</td><td>1144</td></tr><tr><td>146</td><td>1145</td></tr><tr><td>147</td><td>1146</td></tr><tr><td>148</td><td>1147</td></tr><tr><td>149</td><td>1148</td></tr><tr><td>150</td><td>1149</td></tr><tr><td>151</td><td>1150</td></tr><tr><td>152</td><td>1151</td></tr><tr><td>153</td><td>1152</td></tr><tr><td>154</td><td>1153</td></tr><tr><td>155</td><td>1154</td></tr><tr><td>156</td><td>1155</td></tr><tr><td>157</td><td>1156</td></tr><tr><td>158</td><td>1157</td></tr><tr><td>159</td><td>1158</td></tr><tr><td>160</td><td>1159</td></tr><tr><td>161</td><td>1160</td></tr><tr><td>162</td><td>1161</td></tr><tr><td>163</td><td>1162</td></tr><tr><td>164</td><td>1163</td></tr><tr><td>165</td><td>1164</td></tr><tr><td>166</td><td>1165</td></tr><tr><td>167</td><td>1166</td></tr><tr><td>168</td><td>1167</td></tr><tr><td>169</td><td>1168</td></tr><tr><td>170</td><td>1169</td></tr><tr><td>171</td><td>1170</td></tr><tr><td>172</td><td>1171</td></tr><tr><td>173</td><td>1172</td></tr><tr><td>174</td><td>1173</td></tr><tr><td>175</td><td>1174</td></tr><tr><td>176</td><td>1175</td></tr><tr><td>177</td><td>1176</td></tr><tr><td>178</td><td>1177</td></tr><tr><td>179</td><td>1178</td></tr><tr><td>180</td><td>1179</td></tr><tr><td>181</td><td>1180</td></tr><tr><td>182</td><td>1181</td></tr><tr><td>183</td><td>1182</td></tr><tr><td>184</td><td>1183</td></tr><tr><td>185</td><td>1184</td></tr><tr><td>186</td><td>1185</td></tr><tr><td>187</td><td>1186</td></tr><tr><td>188</td><td>1187</td></tr><tr><td>189</td><td>1188</td></tr><tr><td>190</td><td>1189</td></tr><tr><td>191</td><td>1190</td></tr><tr><td>192</td><td>1191</td></tr><tr><td>193</td><td>1192</td></tr><tr><td>194</td><td>1193</td></tr><tr><td>195</td><td>1194</td></tr><tr><td>196</td><td>1195</td></tr><tr><td>197</td><td>1196</td></tr><tr><td>198</td><td>1197</td></tr><tr><td>199</td><td>1198</td></tr><tr><td>200</td><td>1199</td></tr></tbody></table></div>
我在php页面中将此javascript代码添加为源文件，如下所示：
<?php
$sn = 1; $num = 1000;
echo '<input type="button" value="Print" onclick="printDiv(\'content\')" />
echo '<div id="content">';
//creating lot of rows so that it will be printed on more than one page
echo '<table><thead><tr><th>Serial Number</th><th>Number</th></tr><tbody>';
for($i=0;$i<200;$i++){
echo '<tr><td>'.$sn+$i.'</td><td>'.$num+$i.'</td></tr>';
}
echo '</tbody></table>';
echo '<script src="table.js"></script>'; //<--- table.js file
echo '</div>';
?>
和用于打印表格的javascript代码是：
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
包含的table.js文件通过此方法很有效，每个打印页面上都会重复表头。但它在主表中添加了一些额外的div，table，tbody等，以便通过table.js文件格式化表。
如果我在创建表后添加一些功能，如添加行，删除行等，从而重新排序序列号列，则会产生一些问题。 这就是为什么我首先想要的表格不会被格式化，没有额外的div，table，tbody等会被table.js代码添加到主表中。所以我在php页面中省略了以下行：
'<script src="table.js"></script>'; //<--- table.js file
但我希望当我按下“打印”按钮时，table.js文件的整个代码将在行动中并且表格将被格式化（必要的div，addtional table，tbody等将被添加到主表中以打印表格打印前的每个打印页面上的标题。但我无法弄清楚该怎么做。我尝试了以下方法：
<script language="javascript" type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'table.js');
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
但似乎js文件不起作用，即表头不会在每个打印页面上打印。 你有什么想法，如何添加table.js的javascript代码，只有在按下“Print”按钮后它才能工作？
[注意：我知道我打印的方式有一些限制/缺点，不应该通过这种方式打印网页。但出于某些原因我必须这样做。因此，请不要更改Javascript print（div）函数]