|
JavaScript - Detecting Distance From Top Of Window In Order To Hide Table Rows
Hi,
I am doing some work, where I want to have a table heading that remains in a fixed position, when the window is scrolled (I will ultimately have a very long table). I have written the code below, which fixes the heading. I am trying to make it so that each body row of the table gets hidden, when the window is scrolled such that the row passes above the heading row. To do this I need to somehow detect the distance of each row from the top of the window as the window is scrolled so I can detect when it goes above the fixed heading row. I have tried to do this using offsetTop and scrollTop in the code below, but it doesn't seem to be working (in Safari at least, which I am using for my main testing). Does anyone know a simple way of detecting the distance to the top of the window so I can use it in my code below, which will work in all browsers? (I don't really want to use div, and overflow-y:auto to achieve the fixed heading scrollable table, because I don't want to have a sub-section with its own scrollbar. I just want to have the main page scrollbar when the list gets long enough to require it.) Thanks for your help. Cheers, Laudrup Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test simple scroller</title>
<style type="text/css">
.myvisible
{
visibility:visible;
}
.myinvisible
{
visibility:hidden;
}
table#mytable td
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table#mytable th
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table#mytable thead
{
position:fixed;
top:50px;
background:white;
z-index:+1;
}
</style>
<script language="JavaScript">
<!-- Beginning of JavaScript -
var rows;
function hideoverflow() {
rows = document.getElementById("mytable").getElementsByTagName("tr");
for (i=1; i<rows.length; i++){
if((rows[i].ScrollTop - rows[i].offsetTop)>50){
rows[i].className="myinvisible";
}
else{
rows[i].className="myvisible";
}
}
}
// - End of JavaScript - -->
</script>
</head>
<body onScroll='hideoverflow();'>
<p>My heading</p><br>
<table id="mytable" border="0" cellspacing="0"bordercolor="black">
<thead>
<tr>
<th width="100" bgcolor="white">HeadA</th>
<th width="140" bgcolor="white">HeadB</th>
<th width="120" bgcolor="white">HeadC</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">row1</td>
<td width="140">row1</td>
<td width="120">row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
<td>row4</td>
</tr>
<tr>
<td>row5</td>
<td>row5</td>
<td>row5</td>
</tr>
<tr>
<td>row6</td>
<td>row6</td>
<td>row6</td>
</tr>
<tr>
<td>row7</td>
<td>row7</td>
<td>row7</td>
</tr>
<tr>
<td>row8</td>
<td>row8</td>
<td>row8</td>
</tr>
<tr>
<td>row9</td>
<td>row9</td>
<td>row9</td>
</tr>
<tr>
<td>row10</td>
<td>row10</td>
<td>row10</td>
</tr>
<tr>
<td>row11</td>
<td>row11</td>
<td>row11</td>
</tr>
<tr>
<td>row12</td>
<td>row12</td>
<td>row12</td>
</tr>
<tr>
<td>row13</td>
<td>row13</td>
<td>row13</td>
</tr>
<tr>
<td>row14</td>
<td>row14</td>
<td>row14</td>
</tr>
<tr>
<td>row15</td>
<td>row15</td>
<td>row15</td>
</tr>
<tr>
<td>row16</td>
<td>row16</td>
<td>row16</td>
</tr>
<tr>
<td>row17</td>
<td>row17</td>
<td>row17</td>
</tr>
<tr>
<td>row18</td>
<td>row18</td>
<td>row18</td>
</tr>
</tbody>
</table>
</body>
</html>
Similar TutorialsHey there! I found a great code to do this, but I would like to have the row defult set to hide via the Javascript. This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code. Thank you! ................. Code: <html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<span onClick="toggle('nameit');">toggle</span><br /><br />
<table border="1">
<tr nameit=fred >
<td >Always Visible</td>
</tr>
<tr nameit=fred id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>s visible</td>
</tr>
</table>
</script>
</body>
</html>
Hi to All, I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this. Here the code: <html> <head> <script type="text/javascript"> function toggle(name) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(name)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } // function toggle(nome) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(nome)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } </script> </head> <body onload="toggle('name');"> <table> <tr nome="riga_i"> <td>REQUISITI RELATVI AL SERVIZIO</td> <td> </td> <td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr> <tr name="row_e"> <td> </td> <td>REQUIREMENTS RELATED TO THE SERVICE</td> <td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr> .... .... and so on.... ..... </table></html> To better the code I have tried in this way but without success ... <html> <head> <script type="text/javascript"> function toggle(this) { if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } } </script> </head> Thanks in advance !!! I am trying to pop up a window and then do stuff(set flags) when the content of the new window is done loading. For this I am trying to detect the window.onload of the pop-up child window but so far I am unsuccessful. I believe my problem is that the URL of child window is on different domain, than the one of the opener(parent) so that the window.onload is not being called. Thought this may change, at the moment I do not have access to the code for the page I'm opening up in the pop-up. Im pretty new to web development. Any help is appreciated. Heres my js code Code: //globals
var popupHandle = null;
var openingWindow = false;
function popWindow(URL){
var windowId="sameid";
if (openingWindow == true)
{
alert("Please wait, content is still loading")
return;
}
if ((popupHandle == null || popupHandle.closed)){ //is first time run or window was closed
openingWindow = true;
popupHandle = window.open(URL, '" + windowId + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=900,height=500');
popupHandle.onload = function(){
//this is the code that never executes even if I all I put in here is simple alerting
openingWindow = false;
windowHandle.focus();
};
}
else{// window still exists, reset attributes
if (popupHandle != null)
{
popupHandle.location.href = URL;
popupHandle.focus();
}
}
}
Note: The whole reason why I am doing this is because if its the first time I am clicking on the button that will open this pop up window and I click it repeatedly very quickly, a new pop up is opened for each time I clicked eventhough the window.open is supposed to reuse the window if it has the same windowId. The first call to window.open takes long enough to not have a window handle ready and this allows other clicks to get through. Hi, I'm writing a page scraper in javascript which involves loading a page to scrape, detecting when the page has loaded successfully and then scraping the data. I can get the 'page loading detection' to work if I load the page in a sub-frame. But this is no good as some sites include frame-buster code which breaks my scraper and I cant get any of the framebuster-buster solutions to work. So instead I decided to look at loading the page in a separate tab. Does anyone know how to reliably detect when a page has finished loading in a tab please? I am using Firefox only and I dont mind if the solution requires some extension or greasemonkey script (I have already added the configuration/commands to allow access to pages from different domains). The code below shows an attempt. It sometimes detects when the initial page has loaded but when I press 'submit' it doesnt detect the second loading. Thanks. Code: <html>
<head>
<script type="text/javascript">
currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");
currentPageObj.addEventListener("load", function(){alert("loaded")}, false);
</script>
</head>
<body>
<form action="http://www.example.com" rel="nofollow" target="currentPage">
<input type="submit">
</form>
</body>
</html>
plzz help!!!! i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table.. Requirement: -design a page to keep the track of payments -select box which holds two types (payments /adjustments) -data when submitted to be saved in the table -by default "all" radio box to be checked if payment radion button is checked the fields of nly payments to be displayed if adjustments radion button is checked the fields of nly adjustments to be displayed - this the code i developed soo far [CODE] <html> <head> <title> Payments/Adjustments </title> <script> var num1=0; function Output(srcHolder) { alert("haiiii"); //var srcTable = document.createElement("resultTable"); srcTable = document.getElementById("resultTable"); srcTable.deleteRow(srcTable.rows.length-1); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.type.value+"-"+f.name.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.amount.value; num1=f.amount.value; var total=add(); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = "amount"; tmpCell = tmpRow.insertCell(); tmpCell.innerText = total; srcHolder.appendChild(srcTable); if(flag==1) { tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; } } var sum=0; function add() { num1=parseInt(num1); sum=sum+num1; return sum; } </script> </head> <body> <form name="f"> <table align="center"> <tr> <td> DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/> </td> <td> For:<input type="name" id="name" title="Entername" size="40" /> </td> <td> Amount:<input type="name" id="amount" title="amount" size="10" /> </td> </tr> <tr> <td colspan="3"> Type:<select name="type"> <option value="">--Select--</option> <option value="adjust" >adjustments</option> <option value="payments">payments</option> </select> <td> </tr> </table> <br><center> <input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/> <input type="reset" name="Cancel" value="Cancel"/> </center> <hr> <center> <label for="type">Type</label> <input type="radio" name="type1" value="pa"/>payments <input type="radio" name="type1" value="ad"/>adjustments <input type="radio" name="type1" value="all" />all <table border="3" id="resultTable"> <thead> <th>Date </th> <th>For </th> <th>Amount </th> </thead> <tbody> <tr> </tr> <tr> </tr> <th> </tr> </tbody> </table> <div id="srcHolder" > </div> </form> </body> </html> [CODE] Hi I have a requirement: I need my user click on a Firefox shortcut on toolbar: this shortcut refers to a page index.php(resized to 300x100) will be popped, which has 2 textboxes. BUT those 2 boxes will be filled from a macro which will take data from Oracle DB(this works), and the little window of index.php is shown filling up...(I do NOT wanna this, the user should NOT see this)How can I do this? once that is filled it retrieves the results in results.php (Same window) which has results according to the data filled in text boxes. I want to do this way: 1). while filling out txt fields on 300x100 page, the window should go behind scenes. 2). when the results are retrieved it should come back to front. I am not doing this with a pop -up. it is just regular window. Can I achieve this? Thanks in advance Hi there im trying to automatically time out a floating div window. So far have this which works when i preview in the server but not live on the site: Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Floating Window</title>
<script src="Drag.js"></script>
</head>
<body onload="setTimeout(function(){ document.getElementById('window').style.display='none'; },7000);">
<div id="window" style="position:absolute; overflow:hidden; z-index:10; left:0px; top:0px; width:100%; height:100%;
background-color:#ffffff;">
<div align="center"><img src="site_logo.gif" width="700" height="100"></div>
<div style="position:absolute; top:3px; left:95%; float:right;" onClick="this.parentNode.parentNode.style.display = 'none';">
<img src="close_button.gif" width="48" height="14" border="0"></a></div>
<div align="center"><img src="interstitial.gif" width=700 height=373 alt="" border="0"></div>
</div>
</body>
</html>
the bit in red is the code thats not working/timing out after 7 seconds in the live site. the bit in blue is the code that does close the window but only if you click the close button. Ive also tried inserting something like this: <script type="text/javascript"> function nodeHide() { this.parentNode.parentNode.style.display = 'none'; } window.onload = setTimeout("nodeHide()", 7000); </script> but i just get errors.... I also tried this: <script type="text/javascript"> <!-- function nodeHide(){ this.parentNode.parentNode.style.display = "none" } //--> </script> </head> <body OnLoad = "setTimeout('nodeHide()', 7000)"> but i get an error saying this.parentNode.parentNode. is null or not an object. any help you could give would be great! Lisa Hi all I want to hide address bar for pop up window. I have used following script. In Linux machine its working fine. But in Windows machine address bar still displaying. I dont know whats the wrong. Please help me out. This is the code <script> function openNewWindow(url) { window.open (url,"",'width=620,height=300,scrollbars=yes,menubar=no,location=no'); } </script> <a href="javascript:void(0);" onclick="return openNewWindow('some url')">Click here</a> My table starts like this: Code: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> When an addRows button is clicked, the first two rows are copied (cloned), a checbox is then inserted into the row1 cell1, then the two rows are appended: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check[]'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> Rows,except the first two can then be deleted by selecting the appropriate checkbox and clicking a deleteRow button. The check[] only exists after the first two rows have been copied and appended, so undefined means only two rows exist. Having a problem with the while loop. If a browser sees the next sibling of a tr as a td, the the loop should force the browser to go to the next sibling until its a tr, i.e row4. But its causing my browser(FF) to become unresponsive. Code: function deleteRow()
{
if(check == 'undefined')
{
return;
}
else
{
var check = document.getElementsByName('check[]'),row,nextRow,x;
var len = check.length;
for(x=len-1; x>=0; x--)
{
if(check[x].checked)
{
row = check[x].parentNode.parentNode;
while(row.nextSibling.nodeName != 'tr')
{
nextRow = row.nextSibling;
}
nextRow = row.nextSibling;
alert('ok');
}
}
}
}
Appreciate ans help with this? My table had the following layout. Code: <table> <tr> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> After clicking an add rows button, the two rows are cloned and appended as follows with a checkbox added as shown. Code: <table> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> I want to be able to delete rows 3&4 by selecting the checkbox in row 3 and clicking a delete rows button. Regardless of how many sets of rows have been previously added, any set of rows can be deleted by selecting the appropriate checkbox(es) and clicking delete button. I'm trying to figure out how this can be done. My thinking is if checkbox is checked, calculate row index. I would then have to call deleteRow twice on that row index. Is there a better way of doing this? I have code that hides some check boxes based on what is selected in a radio button, and it works great. I am wondering if it could hide the entire table row instead of just the boxes so it decreases white space on my form, Here is my current code, <tr id="playIntroRow"> <td class="editLabel"><span>*</span>Play Intro:</td> <td> <label>Yes <input type="radio" name="playintro" value="1" onclick="document.getElementById('voiceIntroRow').style.visibility='visible';" /> </label> <label>No <input type="radio" name="playintro" value="0" checked onclick="document.getElementById('voiceIntroRow').style.visibility='hidden';" /> </label> </td> </tr> </cfif> <cfif voiceStatus eq "on"> <tr id="voiceIntroRow" style="visibility: hidden;"> <td class="editLabel"><span>*</span>Intro Message:</td> <td><cfscript>voiceIntroRenderer.Render();</cfscript></td> </tr> </cfif> hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. it sum but not like integer for ex. in row1 i enter 20 and in row2 i enter 5 it sums like 205 but i need it sums like 25 if possible pls help me Thanks beforehand here is code Code: <html>
<head>
<title></title>
<script type="text/javascript">
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element txtRow, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of txtRow8. super fantastic.
el.name = 'txtRow' + iteration;
// the exact same thing with a unique id
el.id = 'txtRow' + iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
el.rel = 'sum';
// same thing as earlier, append our element to our freshly and clean cell
cellRight.appendChild(el);
// select cell
// our last cell!
var cellRightSel = row.insertCell(2);
// create another element, this time a select box
var sel = document.createElement('select');
// name it, once again with an iteration (selRow8 using the example above)
sel.name = 'selRow' + iteration;
// crates options in an array
// the Option() function takes the first parameter of what is being displayed
// from within the drop down, and the second parameter of the value it is carrying over
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
sel.options[2] = new Option('text two', 'value2');
// append our new element containing new options to our new cell
cellRightSel.appendChild(sel);
}
function removeRow()
{
// grab the element again!
var tbl = document.getElementById('mySampleTable');
// grab the length!
var lastRow = tbl.rows.length;
// delete the last row if there is more than one row!
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<script type="text/javascript">
function sum() {
var elem = document.getElementById('eval_edit').elements;
// loop fields in form
for (var i = 0; i < elem.length; i++) {
// check if field has attribute 'rel' with value of 'sum'
if (elem[i].getAttribute('rel') == 'sum') {
// parse value as integer and copy to total field
document.getElementById('total').value += parseInt(elem[i].value);
}
}
}
</script>
</head>
<body>
<form action="miro.html" name="eval_edit" method="post" format="html">
<table align="center" width = "75%">
<tr>
<td align = "center">
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
</td>
</tr>
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<td>
Lesson
</td>
<td>
Title
</td>
<td>
Instructor
</td>
</tr>
<!--- i create the initial row by hand, there are a lot of --->
<!--- different ways to do this depending on what parsing --->
<!--- language you use, i found this was easiest for the --->
<!--- snippet, but experiment, do your thing mang. --->
<!--- this matches the same specs we laid out in the javascript --->
<tr>
<td>
1
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
<option value="value2">text two</option>
</select>
</td>
</tr>
</table>
<input name="total" />
<!--- our buttons call our javascript functions when clicked --->
<input type="button" value="Add" onclick="addRow();" />
<input type="button" value="Remove" onclick="removeRow();" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
have created dynamic table with two columns for ex:first column is Income column and second column is tax from Income at the third column are different percent options for ex. I wrote first column 1000 and chose from third drop down box 10% I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100 here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users thanks beforehand here si code Code: <html><head><title>dinamik sheet</title>
<script>
function addrow(){
var tbl=document.getElementById('sheet');
var lastrow=tbl.rows.length;
var iteration=lastrow;
var row=tbl.insertRow(lastrow);
var cellLeft=row.insertCell(0);
var textNode=document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight=row.insertCell(1);
var el=document.createElement('input');
el.type='text';
el.name='txtRow'+iteration;
el.size=40;
el.setAttribute('sumMe',"1");
el.onBlur=sum;
cellRight.appendChild(el);
var cellRight2=row.insertCell(2);
var el1=document.createElement('input');
el1.type='text';
el1.name='txtRowe'+iteration;
el1.id='txtRowe'+iteration;
el1.size=40;
el1.setAttribute('sumMe',"1");
cellRight2.appendChild(el1);
var cellRightsel=row.insertCell(3);
var sel=document.createElement('select');
sel.name='selRow'+iteration;
sel.options[0]=new Option('10%','value="10"');
sel.options[1]=new Option('20%','value="20"');
sel.options[2]=new Option('30%','value="30"');
cellRightsel.appendChild(sel);
var cellRightsel2=row.insertCell(4);
}
</script>
<script>
function sum(){
var form=document.getElementById('eval_edit');
if(!form) return;
var s1 = 0;
var s2 = 0;
var tbl=document.getElementById('sheet');
var iteration=tbl.rows.length-1;
for(var i=1; i<=iteration; i++){
var el = form['txtRow'+i];
if(!el) continue;
var txt = el.value;
if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
var el2 = form['selRow'+i];
var el3 = document.getElementById('txtRowe'+i);
if(!el2 || !el3) alert('Error in calculating totals');
var percent = Number(el2[el2.selectedIndex].value)/100;
var tax = Number(txt) * percent;
el3.innerHTML = tax.toFixed(2);
s1 += Number(txt);
s2 += tax;
}
if(form['total']){ form['total'].value = s1.toFixed(2); }
if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
}
onload = function(){
sum();
}
</script>
</head>
<body>
<form name="eval_edit" method="POST">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr><td align="center">
<table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
<tr><td>1</td>
<td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
<td><select name="selRow0">
<option value="value="10">10%</option>
<option value="value="20">20%</option>
<option value="value="30">30%</option></select></td></tr></table>
INCOME SUM<input name="total" type="text"/>
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRow()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
</td>
</tr>
</table>
</form>
</body>
</html>
I have a temp HTML file that is based the code I found on this site at http://www.codingforums.com/showthread.php?t=103961. It dynamically adds and removes rows from an HTML table with inputs in the cells. I have tweaked my copy a bit to match our needs. Of importance to this post is that column 1 is simply the row number. Unfortunately, I am unable to figure out how to re-sequence the first column if a row is deleted. For example, if there are 4 rows, and I delete row 3, I need to re-sequence (re-number) the values to reflect 1, 2, 3, not 1, 2, 4. Below is the insert logic (which adds a delete button for the row). Code: function insertRow() {
nForm = document.forms[0];
nForm['submit'].disabled = false;
nTable = document.getElementById('worksheet');
var lastRow = nTable.rows.length;
var x = nTable.insertRow(lastRow);
var a = x.insertCell(0);
var b = x.insertCell(1);
var c = x.insertCell(2);
var d = x.insertCell(3);
var e = x.insertCell(4);
var f = x.insertCell(5);
var g = x.insertCell(6);
var h = x.insertCell(7);
var i = x.insertCell(8);
var j = x.insertCell(9);
var k = x.insertCell(10);
var l = x.insertCell(11);
var z = x.insertCell(12);
a.innerHTML="<input type='text' class='PanelNo' name='PanelNo[]' value='"+lastRow+"' readonly>";
b.innerHTML="<input type='text' class='PanelQty' name='PanelQty[]' value='1' onblur='setDefault(this)' onKeyup='verifyNumeric(this)' >";
c.innerHTML="<input type='text' class='PanelThickness' name='PanelThickness[]' onkeyup='verifyNumeric(this)' >";
d.innerHTML="<input type='text' class='PanelWidth' name='PanelWidth[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>";
e.innerHTML="<input type='text' class='PanelHeight' name='PanelHeight[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>";
f.innerHTML="<input type='text' class='FloorElev' name='FloorElev[]' onkeyup='calc(this)' onkeyup='verifyNumeric(this)' >";
g.innerHTML="<input type='text' class='BlockoutSQFootage' name='BlockoutSQFootage[]' align='center' readonly>";
h.innerHTML="<input type='text' class='PanelWeight' name='PanelWeight[]' readonly>";
i.innerHTML="<input type='text' class='TotalCubicYds' name='TotalCubicYds[]' readonly>";
j.innerHTML="<input type='text' class='LiftingInsReq' name='LiftingInsReq[]' readonly>";
k.innerHTML="<input type='text' class='DaytonBraceReq' name='DaytonBraceReq[]' readonly>";
l.innerHTML="<input type='text' class='DaytonBraceQty' name='DaytonBraceQty[]' readonly>";
z.innerHTML="<input type='button' value='Delete' class='button' onclick='deleteRow(this)'>";
}
Here is the logic for deleting a row (dynamically added for each row with the last line in the above code). I have added all the code after the 1st line, but it clearly does not work (but gives no errors): Code: function deleteRow(subjRow) {
subjRow.parentNode.parentNode.parentNode.removeChild(subjRow.parentNode.parentNode);
var PanelNo = document.getElementsByName('PanelNo[]');
NoRows = PanelNo.length;
if (NoRows > 0) {
var temp = new Array();
for (xx1=0; xx1 < NoRows; xx1++) {
temp[xx1] = (xx1+1);
}
// how do I do this?
document.getElementsByName('PanelNo[]').innerHTML = temp;
}
}
I have never worked with arrays like this for dynamic inputs, so any help would be appreciated. I would like to be able to write a function (or something) to count the number of rows in the table, I don't know how to do it, any help is appreciated.
Hey guys, I have a table which contains a link to add rows in each row after the header. This link, when clicked, adds a row beneath the row which contained the clicked link. This part works perfectly. However the added rows each have a link to remove themselves from the table, and this is the part which isn't working properly. What's supposed to happen is that you click on a link, and then the row which contains the link you just clicked on is deleted. What's actually happening is when the "remove" links are clicked, first the row 2 rows above it is removed, then the row directly above it, then the correct row (itself) is deleted. Hope all of that makes sense! This is my script: Code: function addRowToTable(thisRow)
{
var tbl = document.getElementById('foodsTable');
addedRow = thisRow + addedRows;
var row = tbl.insertRow(addedRow);
row.id = addedRows;
addedRows = addedRows + 1;
var cellLeft = row.insertCell(0);
cellLeft.innerHTML = " + <input type='text'> <a href='JavaScript:removeRowFromTable(" + row.id + ")'>Remove</a> ";
var cellMiddle = row.insertCell(1);
cellMiddle.innerHTML = "<input type='text'>";
var cellRight = row.insertCell(2);
cellRight.innerHTML = "text here";
}
function removeRowFromTable(i)
{
var tbl = document.getElementById('foodsTable');
document.getElementById('foodsTable').deleteRow(i)
addedRows = addedRows - 1;
}
And this is my table: Code: <table width=100% id="foodsTable">
<tr bgcolor="#EEEEEE">
<td width=*><b>Food/Drink</b></td>
<td align="right" width=100><b>Purchased</b></td>
<td align="right" width=100><b>Produced</b></td>
<td width=60></td>
</tr>
<tr>
<td><a href="itemdetails.php?item=Apples" onMouseover="ddrivetip('<?php getToolTipData('Apples',$Foods); ?>')"; onMouseout="hideddrivetip()">Apples</a>
<a href="JavaScript:addRowToTable(2)">+ Add similar food</a>
<font color="#FF0000">*NEW*</font></td>
<td align="right"><input type="text" name="Apples" maxlength="10" size="10" value="<?php echo $session->foodsApplesPurc; ?>" style="text-align:right" /></td>
<td align="right"><input type="text" name="ApplesProd" maxlength="10" size="10" value="<?php echo $session->foodsApplesProd; ?>" style="text-align:right" /></td>
<td>kg/week</td>
</tr>
<!-- many more rows just like the one above /-->
</table>
I've highlighted the sections which I believe are most likely to be the source of my problems. Please ignore the PHP and mouseover/mouseout parts - I don't think they're relevant to this particular problem. I'm also not bothered at this stage by the fact that I'm not adding enough cells to the new rows - I'll fix this later. At this stage I just want to get the "remove" links to remove their own rows. Any ideas? Knowing me it's most likely a case of me making it way more complicated than it needs to be, and digging myself into a hole! I will be eternally indebted to anyone who can give me any help! Thanks in advance! Hi, have table with 5 rows. First 2 rows visible. Last 3 rows hidden - Code: <tr id="row1" style="display: none"> <tr id="row2" style="display: none"> <tr id="row3" style="display: none"> With onclick would like to make those rows visible to user - how can I do that? thank - john I am trying to select multiple <tr>'s (onclick) in a <table> and then move every selected <tr> to another location in the table (on click). I will also be adding functionality to delete specific rows from a table by clicking on a <td> element, though I've already done this by doing. document.getElementById("container").deleteRow(row.parentNode.rowIndex); I am just completely unsure of how to tackle storing each selected row -- and then moving each selected row elsewhere in the table. I've seen many examples that accomplish close to what I am trying to acheive, however, they are all done via drag and drop and do not allow selecting multiple rows. The below javascript code only displays table rows in class ms-formlabel that contain (AP) in the text. It works great. However, I also need it to also insert a new row right above any rows that also contains (H: and in the detail of that new row, I need the string following the H: So a table row with (AP)(H:Sleepless), would insert a row right above that row as follows Code: <TR><TD>Sleepless</TD></TR> possible? Thanks for any help! Code: <script type="text/javascript">
var theRows = document.getElementsByTagName("TR");
var r = 0;
var strTitle = "";
while (r < theRows.length)
{ try
{ strTitle = theRows[r].innerText || theRows[r].textContent;
strTitle = strTitle.replace(/\n|\r|\t|\^ /g,"");
var row = theRows[r],
cells = row.getElementsByTagName('td');
if (cells[0].className.indexOf('ms-formlabel') > -1)
{
if (strTitle.indexOf("(AP)") == -1)
{
theRows[r].style.display = "none";
}
else
{
theRows[r].cells[0].innerHTML = theRows[r].cells[0].innerHTML.replace("(AP)","");
}
}
}catch(err){}r+=1;
}
</script>
|
|||||||