I'm currently trying to replace my old method of using table with div and which I'm accomplishing successfully but I'm stuck in a problem. The situation is that in my table method I'm hiding some of my <tr style="display:none;"> which are not required by using some java-script functions and display when it is required.
Now I'm converting my tables rows and column by div and the method which I'm using to show only works for table.When the .php page is open I'm passing arguments in url for example localhost/royaltrade/user_access.php?rptType=UserLog and getting it by using $_REQUEST['rptType'] method after this <body onload="funControls();"> calling function which use that case and switch to a function called funControls() and select the case and execute its line.How Can I hide and show my div ? ?? ?
Here is my javascript code
function funControls()
{
<?
switch($_REQUEST['rptType'])
{
case 'UserLog':
echo "showRows('table','CompName');";
echo "showRows('table','UserName');";
echo "showRows('table','StartingDate');";
echo "showRows('table','EndingDate');";
$title='User Log';
$path="browser_reports/rptUserLog.php";
$selected='UserLog';
break;
}
?>
}
Here is the problem in that function can't use rows[rowId] Function for div
function showRows(tableId,rowId){
var hide= true;
var t = document.getElementById(tableId);
var rowStyle = (hide)? "block":"";
t.rows[rowId].style.display = rowStyle;
}
function hideRows(tableId,rowId){
var hide= true;
var t = document.getElementById(tableId);
var rowStyle = (hide)? "none":"";
t.rows[rowId].style.display = rowStyle;
}
Here is my body tag which calls the function onload
<body onLoad="funControls();" >
Here is my HTML working
<table id="table" cellpadding="0" cellspacing="0" border="0" align="center">
<tr height="35" id="CompName" style="display:none">
<td width="150">Select Company:</td>
<td width="200">
<select class="textbox" name="cboCompName" style="width:178px" id ="cboCompName">
<option value="-1"> Select </option>
</td>
</tr>
</table>
Here is the JS Fiddle working with table
Here is the JS FIDDLE working with div in which I want to acheive this methodology
Change your showRows function to
function showRows( rowId )
{
document.getElementById(rowId).style.display = "block";
}
Since you are already passing the rowId, no need to pass the tableId as well since ids are unique in the entire page.
Check this fiddle for a demo.
Related
To keep it simple, I have below html code:
<div class = "customers" data-popover="true" data-html=true
data-content="
<table>
<c:forEach items="${element.first}" var="btnVal" varStatus="loop">
<c:if test="${not loop.first}">
<tr> <button onclick='setTestname(innerHTML)' class='btn btn-primary'> ${btnVal}</button> </tr>
<tr> </tr>
</c:if>
</c:forEach>
</table>
">
<br>${element.first.get(0)}
</div>
Here I am trying to use the value of the clicked button using below javascript function:
function setTestname(test){
test = test.toString().trim();
document.getElementById('hiddenCostomer').value=test;
setLogfilename(test);
document.getElementById('form1').submit();
}
Above code works fine, but I am not sure abt how to access value of div as well. I want to pass two values to setTestname
${btnVal}
${element.first.get(0)}
How to get value of ${element.first.get(0)}
EDIT : I want the exact value of div on which the button is clicked , not the entire DOM.
You should add the value to a data attribute and then get it, something like this:
HTML:
<div id="myid" data-mydata="${element.first.get(0)}"></div>
JS:
document.getElementById("myid").getAttribute("data-mydata");
You can pass the class name of the div you want to fetch contents of.
setTestName(innerHTML, 'customers')
Then use customers as:
document.getElementsByClassName('customers')
which will return the DOM.
<c:set var="BtnIndex" value="${0}"/>
then I set
<tr> <button onclick='setTestname(innerHTML,${BtnIndex + 0})' class='btn btn-primary' > ${btnVal} ${BtnIndex + 0}</button> </tr>
I set one counter and assigned each div a unique number. Later , i fetched the value from array of class customers from that unique counter as index
function setTestname(test,btnIndex){
test = test.toString().trim();
btnIndex = btnIndex.toString();
var elemArray = document.getElementsByClassName('customers');
for(var i = 0; i < elemArray.length; i++){
elemArray[i].id = i;
}
var elem = document.getElementById(elemArray[btnIndex].id);
var mainDir = elem.innerHTML;
}
It worked !!! Bingo
The following code outputs a table with values, and according to the value, it gets a layout. I use jQuery (Ajax) to update the information every 10 seconds.
php script that generates the wanted variables and stores (echoes) them into a json array (example.php)
$variable1 = 20;
if ($variable1 > 0) {
$td_variable1class="positive";
} else {
$td_variable1class="negative";
}
$array['variable1'] = $variable1;
$array['td_variable1'] = $td_variable1;
echo json_encode($array);
html table where the variable is retrieved from the json generated by the example.php:
<table>
<tr>
<td class='variable1class'>
<div id='variable1'></div>
</td>
</tr>
</table>
javascript:
<script type="text/javascript">
$(function() {
refresh();
});
function refresh() {
$.getJSON('example.php', function(data) {
$('div#variable1').html(data.variable1);
$('td.td_variable1').addClass(data.td_variable1);
});
setTimeout("refresh()",10000);
}
The problem is the "addClass" adds a class to the existing class, resulting in an output like this:
before the refresh:
<td class="td_variable1 positive">
after (assuming the variable changed from positive to negative):
<td class="td_variable1 positive negative">
I tried to avoid this by using removeclass:
$('td.td_variable1').removeClass().addClass(data.td_variable1);
But then the actual class name of the td is removed and my output looks like this:
<td class="negative">
and it should look like this:
<td class="td_variable1 negative">
Thanks for your help in advance!
Assuming you only have those 2 options, remove both (and only those two) then add the new one:
$('td.td_variable1').removeClass("positive negative").addClass(data.td_variable1);
.removeClass() removes all classes when not given any parameter. Use .removeClass("negative") instead.
I am confused about this Javascript code which I used to get total rows in a table. It will always output an excess of 1. Example: it will print 5 instead of 4!
<script>
(function() {
var div = document.getElementById('divID11');
div.innerHTML = document.getElementById('tableId11').rows.length;
})();
</script>
<div id =divID11></div>
and table structure is shown below
<table id="tableId11>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $data ?></td>
</tr>
</tbody>
What I am lacking here?
Outputs 3 for the name column when in fact there only 2.
If you want count only TBODY rows, use this JavaScript code:
(function() {
var div = document.getElementById('divID11');
div.innerHTML = document.getElementById('tableId11').getElementsByTagName("tbody")[0].rows.length;
})();
Your JavaScript code counting all rows in table (thead and tbody). If you want count only tbody rows, you must specify the element (so you must modify your code to specify, with which part of your table you wanna work).
JSFiddle here
Try this :
var div = document.getElementById('divID11');
div.innerHTML = document.getElementById('tableId1').getElementsByTagName('tbody')[0].rows.length;
I need help with hiding and show a table in Javascript. My javascript is very short and that is because I want to use setAttribute and getAttribut I some way to hide and show the table when clicking on the link "Hide/show".
HTML
Hide/show</p>
<table class="show" class="hide">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
CSS
.hide{
display:none;
}
.show{
display:block;
}
JAVASCRIPT
var linkhideShow = document.querySelector("#hideshow");
var show = document.querySelector(".show");
var hide = document.querySelector(".hide");
link.onclick = function() {
if (){
}
else{
}
};
Regards!
Give your table a id like this, and use only one class attribute:
<table class="table" id="table1">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
Then set your default value in the css class table or however you want to call it to display:hidden; or display:none'
And then check if your element is shown or hidden and edit the attribute like this:
var table = document.getElementById("table1");
document.getElementById('link').onclick = function() {
if(table.styl.display == "none"){
table.style.display = "block";
}else{
table.style.display = "none";
}};
Here is a working Fiddle
using jquery you can simple do it as follows
$('#linkId').click(function () {
$('#tabelId').toggle();
});
Try this way :
Hide/show</p>
<table id="table "class="show">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
<script>
document.getElementById('link').onclick = function() {
var t = document.getElementById('table');
if(t.classList.contains("show")){
t.className='hide';
}else{
t.className='show';
}};
</script>
Chagne HTML as show below
Show/Hide
<table id="table" class="show">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
In Script tag put following
function ToogleClass() {
var tableS = document.getElementById("table");
if ( tables.getAttribute("class") == "hide"){
tables.setAttribute("class","show");
}
else {
tables.setAttribute("class","hide");
}
}
To get you started (fiddle here):
<a href="#" id="link" onclick="
var elm = document.getElementsByTagName('table')[0];
elm.style.display = elm.style.display ? '' : 'none';
">Hide/show</a>
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
Edit (after your updated question):
link.onclick = function(){
var elm = document.getElementsByTagName('table')[0];
elm.style.display = elm.style.display ? '' : 'none';
}
Updated fiddle here.
Short explanation:
the ternary statement (elm.style.display = elm.style.display ? '' : 'none';) is like an if else:
variable = condition ? /*true*/ : /*false*/ ;
if(condition){variable = /*true*/;} else {variable = /*false*/;};
Normally elements have their style.display unset, so it is an empty string. Empty strings evaluate to false in javascript. So, when the style.display is 'none', then the string is not empty. Thus, when style.display is set (to none), then set it to '' otherwise set it to 'none'.
Another important note: when an element's style.display is unset, the browser will render the element in the element's default display mode. Inline elements (like span) will be inline, block elements (like div) will have block and table elements will have table (not block).
So, setting the elements style.display to '' (instead of 'block') we assure the element get's it's default display mode (also it solves some weird cross browser issues).
Naturally you could also make a toggle function this way (passing the element to toggle as an argument):
function toggle(elm){
elm.style.display = elm.style.display ? '' : 'none';
}
// example use: toggle( document.getElementsByTagName('table')[0] );
NOTE:
Your table should NOT have two class attributes like this: class="show" class="hide".
Also note: In HTML an element's class attribute can have multiple classes separated by spaces: <elm class="class_a class_b"></elm>. In order to reliably add/delete a class one would require another (somewhat heavy) function (because if you would set the full class-attribute, you'd overwrite it completely).
It would be better to give the table an unique ID and reference it via this ID.
Hope this helps!
I have a table list of companies with a [+] button next to each company name in my table list.
When user clicks [+], a javascript function uses jquery ajax to get and append a new table row below the row clicked, which will then display an indented list of departments.
All works great.. until we get to our beloved IE. I'm using IE 8, not tried this on prev versions.
Table list item HTML before a click:
<tr id="row1">
<td align="center">
<div id="button1" class="on" onclick="javascript:expandDepartments(1)"></div>
</td>
<td>Company 1</td>
</tr>
The onClick function:
<script>
function expandDepartments(s_cid) {
if ($('#button'+s_cid+'').hasClass('on')) {
$('#button'+s_cid+'').removeClass('on').addClass('off');
if ( document.getElementsByName('rowafter'+s_cid+'').length == 0) { //if the department list does not exist for this company (first time getting departments)
$.ajax({
type: 'POST',
url: 'ajax/common.php',
dataType: 'html',
data: 'a=getHomePageDepartments&cid='+s_cid+'',
success: function(txt){
setTimeout(function(){
$('#homeCompaniesList tbody').find('#row'+s_cid+'').after(txt);
},1000);
}
});
}else{ //otherwise, just re-show the row again, no need to request it again
setTimeout(function(){
var x = document.getElementsByName('rowafter'+s_cid+'');
for(var k=0;k<x.length;k++)
x[k].style.display = '';
},1000);
}
} else if ( $('#button'+s_cid+'').hasClass('off') ) { //hide the row when MINUS image clicked
$('#button'+s_cid+'').removeClass('off').addClass('on');
var x = document.getElementsByName('rowafter'+s_cid+'');
alert(x.length);
for(var k=0;k<x.length;k++)
x[k].style.display = 'none';
}
}
</script>
The HTML output for a company containing multiple departments:
<tr style="display:;" name="rowafter1"><*td data not important*..
<tr style="display:;" name="rowafter1">
<tr style="display:;" name="rowafter1">
<tr style="display:;" name="rowafter1">
<tr style="display:;" name="rowafter1">
Now, look at javascript function, line:
alert(x.length);
In Firefox, it alerts 5
In IE it alerts 0
Which tells me, the HTML elements injected into the page using jquery ajax are not accessible in IE and I have no idea why. Do I need to set an ajax parameter for ie?? Not sure.. please assist.
ta
IE has an issue with getElementsByName
Alternatively, why not use jQuery?
var x = $('*[name="rowafter'+s_cid+'"]'); //get all elements with name rowafterN
getElementsByName() does not work in < IE9. If you are using jQuery, use the attribute selector:
var x = $('[name="rowafter' + s_cid + '"]');
alert(x.length);