Question

我正在尝试打印带有文本框的HTML表，从其他函数中获取它们的值。但它在预览中没有显示任何内容。这是完整的代码：

    <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>

Answer 1

看起来是因为您的表标记不正确。 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>

Answer 2

您的脚本是正确的，但看起来您的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>

Answer 3

您不应该打印输入字段。这是段落标记的示例。

（您还应该稍微整理一下代码:)。

<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中的打印功能不打印文本框值

3 个答案: