I try to hide one cell of table using javascript. I want to send only id of the whole table to the function and than get to that cell using childNodes property.
Here is my code:
<head>
<style type="text/css">
.hiden{
visibility: hidden;
}
</style>
<script>
function change(){
t = document.getElementById('table');
row = t.node.childNodes[0];
row.node.childNodes[0].className='hidden';
}
</script>
<title></title>
</head>
<body>
<button onclick='change()'>Change</button>
<table id="table">
<tr>
<td>Hi</td>
<td>See you</td>
</tr>
</table>
</body>
I try to hide "Hi".
I get: Uncaught TypeError: Cannot read property 'childNodes' of undefined
on this line:
row = t.node.childNodes[0];
The larger goal is to show only 4 columns of longer table and showing hidden using next/previous buttons. If you know some library to do this please let me know.
Thank you for help.
At first, node is not available in the Node you got using document.getElementById('table');
JSBIN DEMO
Please make the necessary changes in the change()
function change() {
var t = document.getElementById('table');
var row = t.getElementsByTagName("td")[0];
row.className='hidden';
}
For pagination, You could use jQuery's :lt() and :gt() for implementation
In the CSS, you have a typo. The class name should be .hidden
You are accessing the cell wrong
change your js to the following:
function change() {
t = document.getElementById('table');
row = t.rows[0];
row.cells[0].className='hidden';
}
And it should work: Example
Also, please note you have spelt your hidden class wrong (missed a d)
You can use just one line:
function change() {
document.getElementById('table').rows[0].cells[0].className='hidden';
}
try below code,
<style type="text/css">
.hidden{
visibility: hidden;
}
</style>
<script>
function newchange()
{
var table = document.getElementById("table");
for (var i = 0, cell; cell = table.cells[i]; i++) {
//iterate through cells
//cells would be accessed using the "cell" variable assigned in the for loop
if(i == 0 || cell.id == 'firstCell'){
cell.className='hidden';
}
}
}
</script>
<title></title>
</head>
<body>
<button onclick='newchange()'>Change</button>
<table id="table">
<tr>
<td id="firstCell">Hi</td>
<td>See you</td>
</tr>
</table>
</body>
Loop through all cells and then control which cell to hide or show by using loop variable counter ('i' in this case) or by cell id.
Related
I am trying to increment a var when I add a new tr
Table
<table id='myTable'>
<tr>
<td id="count"></td>
<td><select><option value="1">1</option></select></td>
<!--obviously some more options-->
</tr>
</table>
<button onclick="addfield()">Add</button>
Script
<script>
var row = 1;
function addfield() {
document.getElementById("count").innerHTML = row;
$("#myTable").find('tbody').append($('<tr>').append($('<td id="count">')).append($('<td><select><option value="1">1</option></select>')));
row++;
}
</script>
What's happening is, that the script is incrementing the first 'td id="count"'-Tag when adding a new 'tr'-Tag instead of incrementing the next 'td'-Tag. Additionally it doesn't show the count in the new generated 'td'-Tag.
What am I missing?
Okay, so first off let me go ahead and say that I blew up your HTML structure because it looks to me like you are using a table to do something that is not tabular, so I changed the structure to be divs. I also took the incrementing out of your script and used CSS counters to get the same effect. if using a table to hold your data is critical after all, then I guess you won't choose this answer.
HTML
<div id="myTable">
<div class="row">
<div class="cellish"><select><option value="1">1</option></select>
</div>
</div>
</div>
<button onclick="addfield()">Add</button>
CSS
body {
counter-reset: count;
}
.cellish {
display: inline-block;
}
.cellish::before {
content: counter(count) " ";
counter-increment: count;
}
JS
function addfield() {
$("#myTable").append($('<div class="row">')).append($('<div class="cellish"><select><option value="1">1</option></select>'));
}
You should not use the same id multiple times in html elements.
Change like this:
$("#myTable").find('tbody').append($('<tr>').append($('<td><select><option value="1">1</option></select>')));
I am a bit stuck and was wondering if anyone could please help me? I am developing a website that has colResizable JQuery plugin incorporated into it. The plugin is all good and brilliant -its just that I need to have a button that once selected makes the middle row of the colResizable table have a display of none with the custom anchors (relating only to that table row) also having a display of none. And once the button is selected, it is replaced with a button that has 'show', then once that is selected the middle row of the colResizable table appears and the custom anchors of that row also appear. Here is the code that I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>colResizable demo</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/colResizable-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
var onTableCreated = function(){
$("#updatePanelSample").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
postbackSafe:true,
fixed:false,
partialRefresh:true,
});
}
var fakePostback = function(){
$("#updatePanel").html('<img src="img/loading.gif"/>');
setTimeout(function(){
$("#updatePanel").html('<table id="updatePanelSample" width="500" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <th>header</th><th>header</th><th>header</th> </tr> <tr> <td class="left">cell</td><td>cell</td><td class="right">cell</td> </tr> <tr> <td class="left">cell</td><td>cell</td><td class="right">cell</td> </tr> <tr> <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td> </tr> </tbody></table>');
onPostbackOver();
}, 700);
};
var onPostbackOver = function(){
onTableCreated();
};
$("#postback").click(fakePostback);
onTableCreated();
});
</script>
<script type="text/javascript">
function hide_cells(){
document.getElementById("get_cells").style.display = "none";
document.getElementById("get_cells2").style.display = "none";
document.getElementById("get_cells3").style.display = "none";
document.getElementById("get_cells4").style.display = "none";
document.getElementById("change_to_show").innerHTML = "<button onClick='show_cells()' >Show</button >";
}
function show_cells(){
document.getElementById("get_cells").style.display = "inline";
document.getElementById("get_cells2").style.display = "inline";
document.getElementById("get_cells3").style.display = "inline";
document.getElementById("get_cells4").style.display = "inline";
document.getElementById("change_to_show").innerHTML = "<button onClick='hide_cells()' >Hide</button >";
}
</script>
</head>
<body>
<div class="center" >
<br/><br/>
<div id="change_to_show"><button onClick="hide_cells()" >Hide</button ></div>
<div id="updatePanel">
<table id="updatePanelSample" width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th id="get_cells">header2</th><th>header3</th>
</tr>
<tr>
<td class="left">cell</td><td id="get_cells2">cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td id="get_cells3">cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td id="get_cells4" class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
</div>
<br/>
<br/><br/>
</div>
</body>
</html>
Here is the link to the colResizable website: http://www.bacubacu.com/colresizable/
Thanks - any help is highly appreciated!
Updates - I have included some additional information below in order to illustrate what I mean more clearly:
Here is the table and the button that I am working with:
Here is what I mean by the custom anchor:
Here is what happens when I click the 'hide' button that has the 'hide_cell()' function incorporated into it via an onClick:
Notice that even though the the middle column ('header2') disappeared, the custom anchor relating to that column remains, and the other anchor is not in the correct position.
I was wondering if anyone could please help with this problem I am facing? Thanks :) Here's the link to the colResizable plugin site:http://www.bacubacu.com/colresizable/
Cells are not inline displayed. You must to change to table-cell:
document.getElementById("get_cells4").style.display = "table-cell";
There are this values for display in tables:
table > applied to <table> tag
table-row > applied to <tr> tag
table-cell > applied to <td> tag
Learn more:
http://www.w3schools.com/cssref/pr_class_display.asp
Good luck!
I think I figured it out - I needed to find the child [1] of the JCLRgrip. Then change it via the JavaScript to have a display of none, as illustrated below:
<script type="text/javascript">
function hide_cells(){
document.getElementById("get_cells").style.display = "none";
document.getElementById("get_cells2").style.display = "none";
document.getElementById("get_cells3").style.display = "none";
document.getElementById("get_cells4").style.display = "none";
document.getElementById("change_to_show").innerHTML = "<button onClick='show_cells()' >Show</button >";
document.getElementsByClassName("JCLRgrip")[1].style.display = "none";
document.getElementsByClassName("JCLRgrip")[2].style.display = "none";
}
function show_cells(){
document.getElementById("get_cells").style.display = "table-cell";
document.getElementById("get_cells2").style.display = "table-cell";
document.getElementById("get_cells3").style.display = "table-cell";
document.getElementById("get_cells4").style.display = "table-cell";
document.getElementById("change_to_show").innerHTML = "<button onClick='hide_cells()' >Hide</button >";
}
</script>
before any DOM manipulation you have to call colresizable with the param "disable" set to true.
disable: [type: boolean] [default: false] [version: 1.0]
When set to true it aims to remove all previously added enhancements such as events and additional DOM elements assigned by this plugin to a single or collection of tables. It is required to disable a previously colResized table prior its removal from the document object tree using JavaScript, and also before any DOM manipulations to an already colResized table such as adding columns, rows, etc.
so your code will be something like this
var onHideColumn = function(){
$("#updatePanelSample").colResizable({disable:true}); //disable colresizable
hide_cells(); //remove columns, or whatever
$("#updatePanelSample").colResizable(); //enable it again
}
There is a sample included in the version released for colResizable 1.6, you can download it from github or from the official website
I have some table column with some preselected values and now i want to remove those selected values from dropdown(ddlMultiselect) .. Both table column and dropdown option values are same and what i want that those values should be hide/remove from dropdown as per if condition.
$('#sometabletr:gt(0)').each(function () {
var row = $('td:eq(0) > span', this).text();
$('#ddlMultiselect :selected').each(function () {
var col = $(this).val();
if (row == col) {
$(this).remove();
}
});
});
This is the way is do it, fast and easy way
$('#listname option:selected').each(function (index, option) {
$(option).remove();
});
There is another way to approach this issue.. but setting up classes on the table rows, all you have to do is change the class of the table element itself to hide/show vast amounts of things while only doing a single repaint, which GREATLY improves performance.
In this example, I have the adding of a class hard-coded, but you could use jQuery's addClass and removeClass or look up the best alternatives available.
<doctype html>
<html>
<header>
<title>Demo HIde</title>
<style>
#mytable.even tr.odd {
display:none;
}
</style>
</header>
<body>
<table id="mytable">
<tr class="odd"><td>1</td></tr>
<tr class="even"><td>2</td></tr>
<tr class="odd"><td>3</td></tr>
<tr class="even"><td>4</td></tr>
<tr class="odd"><td>5</td></tr>
<tr class="even"><td>6</td></tr>
</table>
<script>
// Show the even values only
document.getElementById("mytable").className += " even";
</script>
</body>
</html>
I am trying to hide the toolbar of a SSRS report.
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 ). The viewer is a Html page that embeds the Report as an IFrame.
The generated Html code is:
<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.
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.
Is there a way to do it? Possibily without jQuery.
Case: No Iframe
Select the element
As jQuery selector:
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:
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
The iframe can be problematic, because it might be sandboxed or the content might come from a different domain. This can lead into a XSS-violation which, in your case, might be unfixable.
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';
I guess you can do it by trying to find the nth Chid
Consider this approach :
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:
$(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. 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(). Voila, you are done.
See the working example here: http://jsbin.com/ACam/1/edit . As always, remember to run with js .
I don't think you need to use JavaScript for this
If you have access to ReportControl solution and server-side code of ReportViewer.aspx.cs, you can set property
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:
<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
http://localhost/ReportServer/Pages/ReportViewer.aspx?%2fMyReport%2fBEA&rs:Command=Render&rc:Toolbar=false
In my index.html page, I have an empty table defined as following:
<body>
...
<table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable">
<tr></tr>
</table>
<script src="my.js"></script>
</body>
As you saw above, there is an JavaScript file my.js is included.
my.js(which is used to update the table row):
var items = ARRAY_OF_OBJECTS_FROM_SERVER; //e.g. items=[{'John', '023567'},{'Bill', '055534'},...];
//Each object element in the "items" array contain "name" and "phone" attribute.
var mytable = $('.mytable tr:first');
for(var i=0; i<items.length; i++){
var obj = items[i];
mytable.after("<tr>");
mytable.after("<td> </td>");
mytable.after(" <td>"+obj.name+"</td>");
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");
}
I successfully get the dynamical table working, but when I try to add mouse hover effect on each row, I just failed. What I tried is by using CSS:
.mytable tr:hover
{
background-color: #632a2a;
color: #fff;
}
I would like the mouse hover with color highlight effect to be working on IE 7+, firefox and chrome, what is the correct way to implement the table row mouse hover effect in my case??
----EDIT----
Here is my index.html page:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>my test</title>
<link href="mystyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable">
<tr>
</tr>
</table>
<script src="my.js"></script>
</body>
</html>
--SOLUTION----
#manji 's solution solved my problem. That's change in JavaScript to use append instead of after inside for loop. Then, the CSS way of highlighting row is working.
You are writing the <td> outside of <tr> with this:
mytable.after("<tr>");
mytable.after("<td> </td>");
mytable.after(" <td>"+obj.name+"</td>");
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");
For example, first one will add a <tr> and close it, then 3 closed <td>s before the <tr> and the last one is incorrect and will have no effect.
Try it this way and it will work:
mytable.after("<tr>"
+"<td> </td>"
+"<td>"+obj.name+"</td>"
+"<td>"+obj.phone+"</td>"
+"</tr>");
and it's better to use .append() (it will add the objects in their list order):
var mytable = $('.mytable'); // mytable selector is changed to select the table
// you can remove the empty <tr>
for(var i=0; i<items.length; i++){
var obj = items[i];
mytable.append("<tr>"
+"<td> </td>"
+"<td>"+obj.name+"</td>"
+"<td>"+obj.phone+"</td>"
+"</tr>");
Try the following:
.mytable tr:hover td
{
background-color: #632a2a;
color: #fff;
}
Given your list of browser support, CSS is the proper solution. It's important to note that the cells (<td>) cover the row (<tr>). So it's their background that you want to modify.
You're best bet is to use jquery's hover: Click Here
IE 7 did not have hover support on elements other than anchor tags. (or maybe that was just 6) either way, since you are using jquery already you can get your hover effect done easily.
$("tr").hover(
function () {
$(this).addClass('hover_class');
},
function () {
$(this).removeClass('hover_class');
}
);
Note: IE 7 will only allow :hover if you are running in HTML 4.01 STRICT for your doctype. Otherwise you need to use javascript to accomplish what you are looking to do.
If you cannot get the css solution to work use a delegate function to handle the dynamic rows.
$("table.mytable").delegate("tr", "hover", function(){
$(this).toggleClass("hover");
});
jQuery:
$('.mytable tr').hover(function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
});
CSS:
.mytable tr.active td
{
background-color: #632a2a;
color: #fff;
}
Check out the working example: http://jsfiddle.net/JpJFC/
Use jquery delegate method which is the best way to do it from performance point of view.
$(".mytable").delegate("tr", "mouseover", function(e) {
$(this).addClass('mouseoverClass');
});
$(".mytable").delegate("tr", "mouseout", function(e) {
$(this).removeClass('mouseoverClass');
});