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 个答案: