Javascript 隐藏<；td>；当我点击打印按钮时_Javascript_Jquery_Html_Css

Javascript 隐藏<；td>；当我点击打印按钮时

javascript jquery html css

Javascript 隐藏<；td>；当我点击打印按钮时,javascript,jquery,html,css,Javascript,Jquery,Html,Css,现在我有了一个打印按钮。当我单击打印按钮时，隐藏现有的列内容并显示另一个内容。每个列都有不同的内容代码 <button class="btn" id="print"><i class="icon-print"></i> Print</button> <div id="drop1" > <td><?php echo $detail->remarks;?></td> </div&g

现在我有了一个打印按钮。当我单击打印按钮时，隐藏现有的列内容并显示另一个内容。每个列都有不同的内容

代码

 <button class="btn" id="print"><i class="icon-print"></i>  Print</button>

 <div id="drop1" >
<td><?php echo $detail->remarks;?></td> 
</div>  

  <div id="drop2" >
<td> <a href="#view_popup_descriptive_index" class="btn green" title="Reason" data-toggle="modal" title="Reason">Reason
<input name="app_id" id="AppId" class="AppId" type="hidden" value="<?php echo $detail->remarks;?>"/> 
 </a>  </td>
 </div>

使用媒体=“打印”。当您要打印页面时，将应用此样式表。您可以通过添加

display:none

来隐藏TD

<link rel="stylesheet" type="text/css" href="print.css" media="print">

利用媒体=“打印”。当您要打印页面时，将应用此样式表。您可以通过添加

display:none

来隐藏TD

<link rel="stylesheet" type="text/css" href="print.css" media="print">

使用CSS打印查询

用于分页材料和在屏幕上查看的文档打印预览模式

使用CSS打印查询

用于分页材料和在屏幕上查看的文档打印预览模式

就像有人评论的那样，div-then-td不是很好的HTML

更好的方法可能是只使用div，并使用CSS创建类似于表的效果，如下所示：

<div class="table">
  <div class="row">
    <div class="cell" id="drop1">
    </div>
    <div class="cell" id="drop2">
    </div>
  </div>
</div>

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }


.table{display:table；}
.row{显示：表行；}
.cell{display:表格单元格；}

然后你的HTML可以接受，你可以通过jQuery继续隐藏/显示。

就像有人评论的那样，div-Then-td不是很好的HTML

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>
    $(document).ready(function () {

        $("#print").on('click', function () {

            document.getElementById('drop2').style.display = "none";
            document.getElementById('drop1').style.display = "block";
            window.print();
        })
    });




</script>
</head>
<body>

  <button class="btn" id="print"><i class="icon-print"></i>  Print</button>

 <div id="drop1" >
<td>show</td> 
</div>  

  <div id="drop2" >
<td> <a href="#view_popup_descriptive_index" class="btn green" title="Reason" data-toggle="modal" title="Reason">Reason
<input name="app_id" id="AppId" class="AppId" type="hidden" value="app_id"/> 
 </a> hide </td>
 </div>


</body>
</html>

更好的方法可能是只使用div，并使用CSS创建类似于表的效果，如下所示：

<div class="table">
  <div class="row">
    <div class="cell" id="drop1">
    </div>
    <div class="cell" id="drop2">
    </div>
  </div>
</div>

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }


.table{display:table；}
.row{显示：表行；}
.cell{display:表格单元格；}

然后您的HTML就可以接受了，您可以通过jQuery继续隐藏/显示。


<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>
    $(document).ready(function () {

        $("#print").on('click', function () {

            document.getElementById('drop2').style.display = "none";
            document.getElementById('drop1').style.display = "block";
            window.print();
        })
    });




</script>
</head>
<body>

  <button class="btn" id="print"><i class="icon-print"></i>  Print</button>

 <div id="drop1" >
<td>show</td> 
</div>  

  <div id="drop2" >
<td> <a href="#view_popup_descriptive_index" class="btn green" title="Reason" data-toggle="modal" title="Reason">Reason
<input name="app_id" id="AppId" class="AppId" type="hidden" value="app_id"/> 
 </a> hide </td>
 </div>


</body>
</html>

$（文档）.ready（函数（）{
$（“#打印”）。在（'单击'，函数（）{
document.getElementById（'drop2'）.style.display=“无”；
document.getElementById（'drop1'）.style.display=“block”；
window.print（）；
})
});
印刷品
显示
隐藏


$（文档）.ready（函数（）{
$（“#打印”）。在（'单击'，函数（）{
document.getElementById（'drop2'）.style.display=“无”；
document.getElementById（'drop1'）.style.display=“block”；
window.print（）；
})
});
印刷品
显示
隐藏

你为什么要在

div

里面写

td

？不要这样做。然后它将是一个无效的html，我在这里看不到任何

表tr
。然后它将是一个无效的html，我在这里看不到任何表tr
。也许可以解释为什么会这样做？：）尝试添加更多文本，使其更像是一个答案，而不仅仅是一个评论。也许可以解释为什么会这样做？：）