隐藏没有div或class的JS元素
[英]Hide JS element without div or class
问题描述
I am trying to hide the toolbar of a SSRS report. 
我试图隐藏SSRS报告的工具栏。
There is a specific reason why I need to use JS( The report will be included in the CRM 2011 Dashboard, and I wanted to remove the toolbar from the Report. Since the report parameters did not work, I imported Report Control solution and I am editing the viewer, which uses JS ). 有一个特定的原因为什么我需要使用JS（该报告将包含在CRM 2011仪表板中，并且我想从该报告中删除该工具栏。由于该报告参数不起作用，因此我导入了Report Control解决方案，编辑使用JS的查看器）。 The viewer is a Html page that embeds the Report as an IFrame. 查看器是一个HTML页面，可将报表作为IFrame嵌入。 The generated Html code is: 生成的HTML代码为：
<table id="reportViewer_fixedTable" cellspacing="0" cellpadding="0" style="table-layout:fixed;width:100%;height:100%;">
<tbody>
<tr style="background-color:#C4DDFF;"> … </tr>
<tr id="ParametersRowreportViewer" style="display:none;"> … </tr>
<tr style="height:6px;font-size:2pt;display:none;"> … </tr>
<tr>
The toolbar is in the 4th tr, and selecting it directly and trying to hide it did not work. 该工具栏位于第4个tr中，直接选择它并尝试隐藏它不起作用。
navCorrectorDiv = report.contentWindow.document.getElementById('reportViewer_Toolbar');
if (navCorrectorDiv != null) {
navCorrectorDiv.style.display = "none";
}
I should select the table reportViewer_fixedTable, that I can do, then select the tbody element and then the fourth tr. 我应该选择可以执行的表reportViewer_fixedTable，然后选择tbody元素，然后选择第四个tr。 Is there a way to do it? 有办法吗？ Possibily without jQuery. 可能没有jQuery。
3 个解决方案
解决方案1
3 已采纳 2013-08-20 15:24:31
Case: No Iframe 案例：没有iframe
Select the element 选择元素
As jQuery selector: 作为jQuery选择器：
var selected;
selected = jQuery('#reportViewer_fixedTable');
…
selected = jQuery('#reportViewer_fixedTable tbody');
…
selected = jQuery('#reportViewer_fixedTable tr:nth-child(4)');
Hide selected with: 隐藏所选内容：
selected.css('display', 'none');
or with modern browsers without jQuery: 或在没有jQuery的现代浏览器中：
var selected;
selected = document.querySelector('#reportViewer_fixedTable');
…
selected = document.querySelector('#reportViewer_fixedTable tbody');
…
selected = document.querySelector('#reportViewer_fixedTable tr:nth-child(4)');
And hide: 并隐藏：
selected.style.display = 'none';
Case: Content in Iframe 案例：iframe中的内容
The iframe can be problematic, because it might be sandboxed or the content might come from a different domain. iframe可能会出现问题，因为它可能是沙盒的，或者内容可能来自其他域。 This can lead into a XSS-violation which, in your case, might be unfixable. 这可能导致违反XSS，在您的情况下，这可能是无法修复的。
Anyway, here we go: 无论如何，我们开始：
//Select the first iframe (which might not be the right one in your case);
var elem = document.querySelector('iframe');
//And put it's body in a variable. We use the querySelector from the body
//of the iframe.
var ibody = elem.contentWindow.document.body;
var table = ibody.querySelector('#reportViewer_fixedTable');
var tbody = ibody.querySelector('#reportViewer_fixedTable tbody');
var fourthtr = ibody.querySelector('#reportViewer_fixedTable tr:nth-child(4)');
table.style.display = 'none';
tbody.style.display = 'none';
fourthtr.style.display = 'none';
解决方案2
0 2013-08-20 15:50:07
I guess you can do it by trying to find the nth Chid 我想你可以尝试找到第n个Chid
Consider this approach : 考虑这种方法：
HTML : HTML：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table id="reportViewer_fixedTable" cellspacing="0" cellpadding="0" style="table-layout:fixed;width:100%;height:100%;">
<tbody>
<tr style="background-color:#C4DDFF;"> <td>1</td> </tr>
<tr id="ParametersRowreportViewer" style="display:none;"><td>2</td> </tr>
<tr style="height:6px;font-size:2pt;display:none;"> <td>3</td> </tr>
<tr><td>FourthTR</td></tr>
</tbody>
</table>
</body>
</html>
JS: JS：
$(function(){
console.log( $('#reportViewer_fixedTable tbody tr:nth-child(4) td:nth-child(1)').text());
$('#reportViewer_fixedTable tbody tr:nth-child(4) td:nth-child(1)').addClass('FourthTR');
$('.FourthTR').hide();
});
So , what we are trying to do is that, we are grabbing the 4th tr of the table and then we are grabbing the 1st child of the 4th tr. 因此，我们想要做的是，先获取表的第4个tr，然后再获取第4个tr的第一个孩子。 Once that is done, we are , on the fly, gonna add a class to it say FourthTR and then hide the class using jQuery.hide() . 完成后，我们将即时向其添加一个类，例如FourthTR ，然后使用jQuery.hide()隐藏该类。 Voila, you are done. 瞧，您完成了。
See the working example here: http://jsbin.com/ACam/1/edit . 请在此处查看工作示例： http : //jsbin.com/ACam/1/edit 。 As always, remember to run with js . 与往常一样，请记住run with js 。
解决方案3
0 2013-08-20 16:50:50
I don't think you need to use JavaScript for this 我认为您不需要为此使用JavaScript
If you have access to ReportControl solution and server-side code of ReportViewer.aspx.cs, you can set property 如果您有权访问ReportControl解决方案和ReportViewer.aspx.cs的服务器端代码，则可以设置属性
reportViewer.ShowToolBar = false
in that code. 在该代码中。
Alternatively, if you have access to and can modify viewer page markup (ReportViewer.aspx), you can set it declaratively: by adding ShowToolBar="false" to ReportViewer control declaration: 另外，如果您有权访问并可以修改查看器页面标记（ReportViewer.aspx），则可以进行声明式设置：通过将ShowToolBar="false"添加到ReportViewer控件声明中：
<rsweb:ReportViewer ID="reportViewer" runat="server" ... ShowToolBar="false">
</rsweb:ReportViewer>
If this is not an option, you can amend URL you're passing to IFrame hosting ReportViewer, by adding rc:Toolbar=false parameter 如果这不是一个选择，则可以通过添加rc:Toolbar=false参数来修改传递给IFrame托管ReportViewer的URL。
http://localhost/ReportServer/Pages/ReportViewer.aspx?%2fMyReport%2fBEA&rs:Command=Render&rc:Toolbar=false
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.