Javascript 单击按钮显示表格_Javascript

Javascript 单击按钮显示表格

javascript

Javascript 单击按钮显示表格,javascript,Javascript,我有index.jsp，我从中调用transaction.jsp。transaction.jsp上有一个表，我不想在transaction.jsp加载时显示它，所以我调用了一个javascript方法hideData（）来隐藏该表。现在，当我单击showData on transaction.jsp按钮时，它将从数据库中获取数据，数据将显示在一个表中，我想用javascript showData（）来显示它，但问题是，当我点击按钮时，首先调用showData（），然后调用hideData，因为页

我有index.jsp，我从中调用transaction.jsp。transaction.jsp上有一个表，我不想在transaction.jsp加载时显示它，所以我调用了一个javascript方法hideData（）来隐藏该表。现在，当我单击showData on transaction.jsp按钮时，它将从数据库中获取数据，数据将显示在一个表中，我想用javascript showData（）来显示它，但问题是，当我点击按钮时，首先调用showData（），然后调用hideData，因为页面再次加载，所以我无法在点击按钮时复制表。然后我尝试如下使用变量，但变量a在转到hideData（）时并没有保留其值在执行showData（）之后。我的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>


var a；
函数hideData（）{
警报（“a为”+a）；
警惕（“内部隐藏”）；
如果（a==“”）
{
警报（“内部如果”）；
document.getElementById（'dataTable'）.style.display=“”；
a=“”；
}否则{
警惕（“其他内部”）；
document.getElementById（'dataTable'）.style.display=“无”；
a=“无”；
}
}
函数showData（）{
document.getElementById（'dataTable'）.style.display=“”；
a=“”；
}

有谁能建议，我如何才能做到这一点。提前谢谢。编辑： 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


你好
MI报告数据


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>


函数showData（）{
document.getElementById（'dataTable'）.style.display=“”；
}
特价{
背景：url（'images/mcf header nav.jpg'）不重复；
边框：1px实心#b0；
颜色：#fff；
字体大小：12px；
字体大小：粗体；
填充：3x12px；
右边距：3x12px；
文本对齐：左对齐；
}
分区状态栏{
背景：url（'images/mcf header nav.jpg'）不重复；
颜色：#fff；
宽度：100%
字体大小：16px；
字体大小：粗体；
填充：3px20px；
文本对齐：左对齐；
}
交易数据
交易信息
日期时间
频道
交易类型
比克
卷










要显示数据，请将“显示样式”设置为“块”
document.getElementById('dataTable').style.display="block"; 


测试数据库连接
身份证件
电子邮件
密码
@foreach（db.Query中的变量行（userQuery））
{
@row.id
@row.email
@row.pswd
}
时间是@DateTime.Now
函数registerFunc（）{document.getElementById（'demo'）.style.display=“block”；
};

函数registerFunc（）{document.getElementById（'demo'）.style.display=“block”
div id=“demo”style=“display:none”
您好，您可以像下面这样进行尝试。希望这可以帮助您摆脱可能面临的挑战
document.getElementById("name1").style.display= "none";
document.getElementById("name2 ").style.display = "block";

正如我在上面提到的，第一件事就是看到我在那里指的id名称，如name1、name2。这里的name1是您在打开表单或根据您的要求打开任何内容时不显示的数据。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>

第二条件I使第二数据显示且使第一数据不显示：
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>


拯救
更新
您不能在不使用javascript的情况下将dataTable元素的样式设置为隐藏吗？例如，…
谢谢您的回复。据我所知，使用style=“display:none”>将始终隐藏我的表。但我希望在页面（transaction.jsp）上加载它不应该出现，而是单击该页面上的按钮（transaction.jsp），应显示表格。表格最初仅在浏览器呈现您的页面时隐藏，但不会永远锁定。您仍然可以使用javascript显示其内容，例如您的showData（）
函数。“据我所知，使用style=“display:none”>将始终隐藏我的表格”–这就是为什么在单击按钮时更改display的值…@ghost我尝试了您提到的方法，但不幸的是，单击按钮时无法显示表格，我认为这是因为我们在表格标记中设置了硬编码值style=“display:none”，所以即使我们将值更改为“”，它仍然采用了harcoded绑定值，即none。感谢您的回复，但我的问题不同。我想在加载transactionData.jsp时隐藏表，并在单击showData按钮时显示它。是的..在showData（）中，ypu以document.getElementById（'dataTable'）.style.display=“”；所以我想如果您以document.getElementById的形式给出（'dataTable'）.style.display=“block”；可能会起作用..我不知道这个文档.getElementById（'dataTable'）.style.display=“”；是否会显示元素..我无法评论..所以我将其作为答案发布..因为您已经添加了hideData（）函数，所以可以从表标记中删除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";
}

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