javascript中的打印功能不打印文本框值
[英]Printing function in javascript is not printing textbox values
问题描述
我正在尝试打印一个带有文本框的 HTML 表格，这些文本框从另一个函数中获取它们的值。 但它在 Preview 中什么也没显示。 这是完整的代码：
<html>
<head></head>
<script type="text/javascript">
function bill() { //Bill
var PriceTest = document.getElementById("Val");
var Quantity = document.getElementById("Quan");
var price = document.getElementById("total");
price.value = PriceTest.value * Quantity.value ;
var tq = document.getElementById("TQuantity");
tq.value = Quantity.value;
}
function printData() {
var TablePrint = document.getElementById("TestTable");
newWin = window.open("");
newWin.document.write(TablePrint.outerHTML);
newWin.print(); // Printing the Bill
}
</script>
<body>
<form>
<table border="1">
<input type="number" id="Quan" min="0" max="100" step="1" value="0"/>
<input type="text" value="100000" class="TextStyle" id="Val"/>
<input type="button" class="BuyButton" name="Buy" Value="Calc" onclick="bill()"/></table>
<br/><br/>
<table id="TestTable" border="1">
<input type="text" id="total" class="TextStyle" onfocus="this.blur();">
<input type="text" id="TQuantity" class="TextStyle" onfocus="this.blur();">
</table>
<input type="button" value="Print This" onclick="printData()"/>
</form>
</body>
</html>
3 个解决方案
解决方案1
0 2015-11-18 01:09:59
看起来是因为您的表格标记不正确。 tr 是表格行的标记，td 是该行中表格数据（单元格）的标记。
<table id="TestTable" border="1">
<tr><td>
<input type="text" id="total" class="TextStyle" onfocus="this.blur();">
<input type="text" id="TQuantity" class="TextStyle" onfocus="this.blur();">
</td></tr>
</table>
解决方案2
0 2015-11-18 01:13:16
您的脚本是正确的，但看起来您的 html 标记无效。 使用当前的实现（至少在 Chrome 中），您最终会得到表格外的文本框，其他浏览器可能会忽略无效标记。 您将需要 tr/td。
<table id="TestTable" border="1">
<tr>
<td>
<input type="text" id="total" class="TextStyle" onfocus="this.blur();">
</td>
<td>
<input type="text" id="TQuantity" class="TextStyle" onfocus="this.blur();">
</td>
</tr>
</table>
解决方案3
0 已采纳 2015-11-18 01:23:36
您不应该打印输入字段。 这是一个带有段落标签的例子。
（你也应该稍微整理一下代码：）
<html> <head></head> <script type="text/javascript"> function bill() { //Bill var PriceTest = document.getElementById("Val"); var Quantity = document.getElementById("Quan"); var price = document.getElementById("total"); price.innerHTML = PriceTest.value * Quantity.value ; var tq = document.getElementById("TQuantity"); tq.innerHTML = Quantity.value; } function printData() { var TablePrint = document.getElementById("TestTable"); var htmlToPrint = '' + '<style type="text/css">' + 'table th, table td {' + 'border:1px solid #000;' + 'padding;0.5em;' + '}' + '</style>'; htmlToPrint += TablePrint.outerHTML; newWin = window.open(""); newWin.document.write(htmlToPrint); newWin.print(); // Printing the Bill } </script> <body> <form> <table border="1"> <input type="number" id="Quan" min="0" max="100" step="1" value="0" /> <input type="text" value="100000" class="TextStyle" id="Val" /> <input type="button" class="BuyButton" name="Buy" Value="Calc" onclick="bill()" /> </table> <br/> <br/> <table id="TestTable" border="1"> <tr> <td> <p id="total"></p> </td> <td> <p id="TQuantity"></p> </td> </tr> </table> <input type="button" value="Print This" onclick="printData()" /> </form> </body> </html>
干杯!
JavaScript无法打印到文本框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.