使用javascript

Question

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>

我的桌子无法显示。我该怎么解决？

Answer 1

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()
}