Question

我有index.jsp，我从中调用transaction.jsp。在transaction.jsp上有表，我不想在load.jsp的加载时显示，所以我调用了一个javascript方法hideData（）来隐藏table.Now当我点击transaction.jsp上的按钮showData时，它将从数据库中获取数据，数据将显示在一个表中，我想用javascript showData（）显示，但问题是，当我点击按钮，第一个showData（）被调用然后hideData被调用，因为页面再次被加载，所以我无法在点击按钮时显示表。然后我尝试使用变量如下，但变量a不保留其值时它在执行showData（）之后转到hideData（）。我的javascript是：原始邮政：

  <script type="text/javascript">
    var a;
    function hideData(){
        alert("a is"+a);
    alert("Inside HideData");
    if(a == " ")
    {
        alert("Inside If");
     document.getElementById('dataTable').style.display=" ";
     a= " ";
    }else{
         alert("Inside else");
         document.getElementById('dataTable').style.display="none";
         a =  "none"; 
    }
    }
    function showData(){

        document.getElementById('dataTable').style.display=" "; 
        a= " ";
    }
    </script>

任何人都可以建议，我怎么能做到这一点。提前致谢。编辑： index.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Hello</title>
</head>
<body>
<s:form>
   <h2>MI Reports Data</h2>
   <a href="<s:url action="displayTransactionAction.action"/>">Transaction Data</a><br>

</s:form>
</body>
</html

＆GT; transactionData.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function showData(){
    document.getElementById('dataTable').style.display=" "; 
}
</script>
<style type="text/css">
thead.special {
 background:url('images/mcf-header-nav.jpg') no-repeat;
 border: 1px solid #B0B0B0;
 color: #fff;
 font-size: 12px;
 font-weight: bold;
 padding: 3px 12px;
 margin-right: 3px 12px;
 text-align: left;
}
div.statusbar {
background:url('images/mcf-header-nav.jpg') no-repeat;
color: #fff;
width:100%
font-size: 16px;
font-weight: bold;
padding: 3px 20px;
text-align: left;
}
</style>
<title>Transaction Data</title>
<s:head theme="ajax" debug="true"/>
</head>
<body bgcolor="white">


<s:form validate="true">

<div class='statusbar'>Transactions Info</div>


      <table border="true" id="dataTable" style="display:none"> 
      <thead class="special">
      <tr>
      <td >
      DateTime
      </td>
      <td>
      channel
      </td>
      <td>
      Transaction Type
      </td>
      <td>
      Bic
      </td>
      <td>
      Volume
      </td>
      </tr>
      </thead>
        <s:iterator  value="listTransBean">   
        <tbody>
             <tr>
             <td>
            <s:property value="dateTime"/><br/>
            </td>
            <td>   
            <s:property value="channel"/><br/>
            </td>
            <td>   
            <s:property value="transactionType"/><br/>
            </td>
            <td>   
            <s:property value="bic"/><br/>
            </td>
            <td>
            <s:property value="volume"/><br/>
            </td>
            </tr>     
            </tbody> 
        </s:iterator>  
        </table>
          <table>
          <tr>
          <td>
       <s:submit id="submitButton" value="Show Chart" align="center" action="displayChartAction"/>
       </td>
       <td>
       <s:submit value="Fetch Data" align="center" action="displayDataAction" onclick="showData();"/>
       </td>
       </tr>
       </table>

   </s:form>
</body>
</html>

Answer 1

要显示数据，请将显示样式设置为阻止..

document.getElementById('dataTable').style.display="block";

Answer 2

        <input type="button" onclick="registerFunc()" Value="Register"></button>
        <div id="demo" style="display: none">

            <h2 class="mainmenu">Testing DB Connection</h2>
            <table>
                <tr>
                    <th>ID</th>
                    <th>Email</th>
                    <th>Password</th>
                @foreach(var row in db.Query(userQuery))
                    {
                        <tr>
                            <td>@row.id</td>
                            <td>@row.email</td>
                            <td>@row.pswd</td>
                        </tr>
                    }
            </table>
        </div>
        <p>The time is @DateTime.Now</p>
    </form>
</div>
<script>
    function registerFunc() {document.getElementById('demo').style.display="block";          
    };
</script>

function registerFunc（）{document.getElementById（'demo'）。style.display =“block”;

div id =“demo”style =“display：none”

Answer 3

您好，您可以尝试以下方式。希望这可以帮助你解决这个问题，让你摆脱明显的挑战。

document.getElementById("name1").style.display= "none";
document.getElementById("name2 ").style.display = "block";

正如我在上面提到的那样，首先看到我在那里的id名称，如name1，name2。这里名称1将是您根据要求打开表单或任何内容时不显示的数据.name2是您打开表单等时需要显示的数据。

首先，你需要使用这样的内联样式：style =“display：none”;默认情况下您不需要显示哪一个。稍后在javascript中使用条件，只要你需要覆盖使用内联CSS属性应用的条件。

举个例子： HTML和CSS：

<table>
        <tr>

            <td class="text-center colspan-2 "><button onclick="saveEmp()"  type="button" class="btn btn-primary btn-lg save"  value="Save" id="save1">Save</button></td>
            <td class="text-center colspan-2">
                <button onclick="update()"  type="button" class="btn btn-info btn-lg save"  value="Update" id = "update1" style="display:none;" >Update</button></td>

        </tr>
        </table>

使用Javascript：第一个条件：

 document.getElementById("save1").style.display = "block";
    document.getElementById("update1").style.display = "none";

第二个条件我要显示第二个数据并使第一个数据不显示：

document.getElementById("save1").style.display = "none";
document.getElementById("update1").style.display = "block";

function save() { 
  document.getElementById("save1").style.display = "block";
  document.getElementById("update1").style.display = "none";
}

function update() {    
  document.getElementById("save1").style.display = "none";
  document.getElementById("update1").style.display = "block";
}

HTML：

<table>
    <tr>            
        <td class="text-center colspan-2 "><button onclick="saveEmp()"  type="button" class="btn btn-primary btn-lg save"  value="Save" id="save1">Save</button></td>
        <td class="text-center colspan-2">
            <button onclick="update()"  type="button" class="btn btn-info btn-lg save"  value="Update" id = "update1" style="display:none;" >Update</button></td>
    </tr>
</table>

在按钮单击上显示表

3 个答案: