基本Javascript：使用onclick来打印表格

Question

 <!DOCTYPE html> <html> <head> <title> Title </title> <style type="text/css"> table.tableizer-table { border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .tableizer-table td { padding: 4px; margin: 3px; border: 1px solid #ccc; } .tableizer-table th { background-color: #104E8B; color: #FFF; font-weight: bold; } </style> </head> <body> Please select your price range (per hour) : <select id="valueDropdown"> <option value="lessThanFive">below 5</option> <option value="betweenSixAndTen">6-10</option> <option value="tenPlus">10+</option> </select> <button type="button" onclick="toggleTable();" >Search</button> <div id="cheapestTable" style="display: none;> <table class="tableizer-table" > <tr class="tableizer-firstrow"><th>SCHOOLS</th><th>Booking </th><th>web site</th><th> Price per hour </th><th> Columna1 </th><th>Courses English</th><th>Language</th><th>Social Media</th><th>Location</th></tr> <tr><td>Brittannia</td><td>no</td><td>7</td><td> £4.00 </td><td>&nbsp;</td><td>General, Examn, 1to1, Business</td><td>English</td><td>&nbsp;</td><td>Manchester</td></tr> <tr><td>ABLE</td><td>no</td><td>8</td><td> £5.00 </td><td>&nbsp;</td><td>General, Examn, 1to1</td><td>English Spanish</td><td>F, T, S, in, I</td><td>Manchester</td></tr> </table> </div> <script> function toggleTable(){ var e = document.getElementById("valueDropdown"); if(e.options[e.selectedIndex].value === 'lessThanFive'){ document.getElementById('cheapestTable').style.display = "table" }else{ document.getElementById('result').innerHTML="hi2"; } } </script> </body> </html>

I'm trying to print a table using Javascript when the user presses a button. 我试图在用户按下按钮时使用Javascript打印表格。 The button works fine. 该按钮工作正常。

The table is quite complex. 该表非常复杂。 What I've tried so far is setting the original location of the table off the screen and then bringing it back when the user pressed the button. 到目前为止，我已经尝试过将桌子的原始位置设置在屏幕之外，然后在用户按下按钮时将其放回原处。

Table: 表：

<div id="cheapestTable">
<style type="text/css">
    table.tableizer-table {
    border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
 position: absolute ;
   top: -99px;
   left: -99px;
}

.. more here with formatting of individual cells etc. ..更多关于单个单元格的格式化等信息。

Then when the button is pressed: 然后，当按下按钮时：

document.getElementById('cheapestTable').style.tableizer-table.left = "100px";
document.getElementById('cheapestTable').style.tableizer-table.top = "100px";

However the table is not appearing when the button is pressed. 但是，当按下按钮时，表格不会出现。

Answer 1

You're missing the closing quote in <div id="cheapestTable" style="display: none;> . 您在<div id="cheapestTable" style="display: none;>缺少结束语。

Also, the proper style to display the DIV is block , not table . 另外，显示DIV的适当样式是block而不是table 。

 function toggleTable() { var e = document.getElementById("valueDropdown"); if (e.options[e.selectedIndex].value === 'lessThanFive') { document.getElementById('cheapestTable').style.display = "block" } else { document.getElementById('result').innerHTML = "hi2"; } }

 table.tableizer-table { border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .tableizer-table td { padding: 4px; margin: 3px; border: 1px solid #ccc; } .tableizer-table th { background-color: #104E8B; color: #FFF; font-weight: bold; }

 Please select your price range (per hour) : <select id="valueDropdown"> <option value="lessThanFive">below 5</option> <option value="betweenSixAndTen">6-10</option> <option value="tenPlus">10+</option> </select> <button type="button" onclick="toggleTable();">Search</button> <div id="cheapestTable" style="display: none;"> <table class="tableizer-table "> <tr class="tableizer-firstrow "> <th>SCHOOLS</th> <th>Booking</th> <th>web site</th> <th>Price per hour</th> <th>Columna1</th> <th>Courses English</th> <th>Language</th> <th>Social Media</th> <th>Location</th> </tr> <tr> <td>Brittannia</td> <td>no</td> <td>7</td> <td>£4.00</td> <td>&nbsp;</td> <td>General, Examn, 1to1, Business</td> <td>English</td> <td>&nbsp;</td> <td>Manchester</td> </tr> <tr> <td>ABLE</td> <td>no</td> <td>8</td> <td>£5.00</td> <td>&nbsp;</td> <td>General, Examn, 1to1</td> <td>English Spanish</td> <td>F, T, S, in, I</td> <td>Manchester</td> </tr> </table> </div>

基本Javascript：使用onclick来打印表格

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-10 05:28:43

基本Javascript：使用onclick来打印表格

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-10 05:28:43

解决方案1
1 已采纳 2015-11-10 05:28:43