时间戳

首页 > 解决方案 > 使用javascript提交后如何显示表格

javascript - 使用javascript提交后如何显示表格

问题描述

html部分

这是我提交按钮的 html 部分。

<form method="post" action="testSales.php">
   <nav>
      <ul>
         <li>
            <div id="week1">
               <input type="submit" name="week" value="Weekly" onclick="javascript:myfunction();"/> 
            </div>
         </li>
      </ul>
      <ul>
         <li>
            <div id="month1">
               <input type="submit" name="month" value="Monthly" onclick='javascript:myfunction(); '/> 
            </div>
        </li>
     </ul>
     <ul>
        <li>
           <div id="year1">
              <input type="submit" name="year" value="Yearly" onclick='javascript:myfunction(); '/> 
           </div> 
        </li>
     </ul>
  </nav>

对于表格 html 代码部分

这是表格部分。

<table id="week1" class="table table-bordered" style="display:none"></table>
<table id="month1" class="table table-bordered" style="display:none">/table>
<table id="year1" class="table table-bordered" style="display:none"></table>

javascript

这是我的 JavaScript。

<script type="text/javascript">
    function myfunction()
    {
        var value=document.getElementById("week1").value;
        if(value == week1)
        {
            document.getElementById('week1').style.display='block';
        }
    }
</script>

我的桌子无法显示。我该如何解决？

标签： javascripthtml

解决方案

function fnc1(id){
document.getElementById(id).style.display ="block"

}
table{

border:1px solid black;
}
<div onclick="fnc1('week-1')">Click Me to show table </div>

<table id="week-1" style="display:none">
<tr>
<td> table content </td>
</tr>
</table>

您必须在输入上设置 id 才能获得其值

并且 id 是唯一的，因此您可以使用

 <div id="week-container">
 <input id="week1">
<table id="week1-table">

正常工作

您也可以将值直接传递给函数

 <input onclick="javascript:myfunction('week1');">

和

function myfunction(tableid){

 document.getElementById(tableid).style.display='block';
//show table week 1
}

最后通过单击提交，您的页面将导航以避免在表单上使用此代码

<form onsubmit="preventNav(event)">

 function preventNav(event){
event.preventDefault()
}

推荐阅读