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

我试图在用户按下按钮时使用Javascript打印表格。 该按钮工作正常。

该表非常复杂。 到目前为止，我已经尝试过将桌子的原始位置设置在屏幕之外，然后在用户按下按钮时将其放回原处。

表：

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

..更多关于单个单元格的格式化等信息。

然后，当按下按钮时：

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

但是，当按下按钮时，表格不会出现。

Answer 1

您在<div id="cheapestTable" style="display: none;>缺少结束语。

另外，显示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