JavaScript - Syncing Table Column Widths

Hi all!
I am trying to implement the "Freeze pane" feature in javascript as it is in excel.
I am almost there but am not able to get one last thing.
The row header freezing is achieved first column freezing is also achieved. However, the top left column cell (which is supposed to stay frozed during both horizontal and vertical scroll) is not frozen.

Prompt help is highly appreciated!
Please find the html file and the js file being used.

Thanks a bunch!
Ree

Thank you for your help with this. I am newer to JS and appreciate the assistance.

I am using iScroll for an image gallery on the iPad. I can place 120 columns equalling 122,880 pixels in width. After that the content fails to display. How can I get additional 180 columns that I have to display?

Hi,

I'm trying to change the column from javascript using.

cell.width='7';

or
cell.style.width="7px";

when i set this. all the columns in each row within the table are resetting to this column width. How can i make sure that this reflects for only one row for which i set this property to.

Please let me know.

using a javascript function to determine if a string is all digits or not and return result based off the decision. if it is all digits, mask all digits except the first two, if not all digits just return the string.

these are the snippets however i am not seeing anything returned in the column

Code:

<script >


var start = function RenderRC(CodeOwner) {

        var Rcode = CodeOwner.toString();

        var pattern = new RegExp("^\d{2,}$ ");

        if (Rcode.match(pattern)) {

            if (Rcode.length > 2)
             {
                var newcode = Rcode.substr(0, 2) + Array(Rcode.length - 2 + 1).join("*");
                return newcode;
            }

        }
          else 
        {
               return Rcode; 
        }
        
    };

</script>

 <ext:RecordField Name="CodeOwner" />


 <ext:Column Header="<%$ Resources:Text, CodeOwner %>"DataIndex="CodeOwner" Width="110" >
                <Renderer Fn ="start" />
                </ext:Column>

Any help would be greatly appreciated...

I'm trying to get cross-browser column support working using the "css3-multi-column.js" script included in the following tutorial:

http://www.cvwdesign.com/txp/article/360

The javascript works, making columns when the site is loaded in Firefox but I keep getting "access denied" errors for the ""css3-multi-column.js" script in Internet Explorer 8, resulting in no columns. I tested the tutorial's example in IE 8 (worked fine), then referred to the tutorial's example time and again checking for discrepancies but I can't seem to figure out where I'm going wrong.

Here's an example on my site where columns are to appear:

http://www.burnmyeye.org/site/about-us

Thanks once again.

Hi

I read a lot of data from excel sheets into JS arrays.

I have a situation where i have name, hours, product id and other few entries.
I have all these details as array in array concept.

eg. array.push(new Array(name,hours,pid,price,place))

Redundant entries that include same names,pid, places will be found in the array.

My prob is to sum up all the hours of the records that belong to same name and product id and store the unique records in one array and ofcourse the hours column sumed up.


name pid hours place
----------------------
aaaa 11 100 chennai
aaaa 11 200 chennai
cccc 22 30 coimbatore
dddd 33 45 chennai
dddd 22 100 chennai
dddd 33 200 chennai

my output should be

name pid hours place
---------------------
aaaa 11 300 chennai
cccc 22 30 coimbatore
dddd 33 245 chennai
dddd 22 100 chennai

can anyone help??

I cannot figure out how to total my column data correctly with JavaScript. The code I have will enter a new row, but it is not summing the columns. The new row is just filled with zeros.
Code:

function totalColumns() {
            var tds = document.getElementById('users_table').getElementsByTagName('td');
            var sum = 0;
            for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className == 'dataRow') {
                    sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                }
            }
            document.getElementById('users_table').innerHTML += '<tr><td>' + sum + '</td><td>' +sum+ '</td><td>' +sum + '</td></tr>';
            alert ("Columns have been totalled and listed at the bottom of each");
        }  //end totalColumns

I can't figure out how to get the rows to total at all. Any insight would be appreciated! Thanks!

hi all.

i'm still newbie with programming.

i have created a table with two columns with a list of scholarship and a read more link. this is the table that i made:



what i want to do is to hide the second column if the user click the "read more" in first column and hide the first column when the user click the "read more" in second column.

if the user click "read less" it will show both column back like normal.

i try to use the javascript for hide column but it cannot link with my "read more" script.

i hope that anyone can help me. thanks in advance

Hello,

I need your help.

I'd like to be able to populate a combo box (drop down box) from a column in my mdb database:

Ex. of whats in mdb database

Name
--------------
Joey
Jacob
Smith
Jerrod
Patrick

What should appear in drop down:
[ ==== COMBO BOX ==== ]
Joey
Jacob
Smith
Jerrod
Patrick

I cant seem to find any help on the web for this?

Thanks for all your help in advance.

have a div & a grid
i want the div to be displayed on the column header click & be positioned with the specific column
suppose 3rd grid header column is clicked the div shld be positioned near 3 column

My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

Code:

<script type="text/javascript">
  addLoadEvent(function() { function1(1); })
  //function1 makes the table rows do something appearance wise.
</script>

<tr>
  <td></td>
  <td></td>
  <td>
    <img src="pics/delete.png" alt="Delete" onclick="function2();">
  </td>
</tr>

I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

This is the program.and here is the script.
I have tried all I know without success. This Sources program is on another css/html forum for another issue.

Frank

Code:

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["Content1", "content2", "content3",]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")

Below, I added: bmiresult to my database but I get the error: There has been an error: could not prepare statement (1 table bmical has no column named bmiresult)

Code:

 html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 INTEGER, weight1 INTEGER, added_on DATETIME, bmiresult INTEGER)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1").value;
          
        var height2 = todoText / 100
  		var BMI = weight1  / (height2 * height2)
        
        var BMI = BMI;
		var bmiresult = BMI.toFixed(3);
          
          
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, added_on, bmiresult) VALUES (?,?,?,?)",
              [todoText, weight1, addedOn, bmiresult],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }

I have a dataTable in which on the keyup event, the cursor focuses to the next field. In IE7, after a field, the next field is not coming into the view. Please help.
The occField(2nd attachment) comes into view only after focus moves to next field, i.e LTD Buy up.

Code:

if (currId.indexOf("Occ") >= 0)
		{
			if(stdBuyUpSelected){
				autoTabFocus("SBuy",index);
			}else if(ltdBuyUpSelected){
				autoTabFocus("LBuy",index);
			}
			else if (isStateZipDisp){
				autoTabFocus("Zp",index);
			}

		}


function autoTabFocus(next,index)
{
	var focusElem = document.getElementById(next+index);
	if (focusElem != null)
	{
		focusElem.focus();		
	}
}

Hi ,

I am new to javascript and have coded an invoice page through help from some available content on web.

here is my requirement

My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that

when Quantity is entered the Price should change to Price=Quantity*Rate on tab out

So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows.

Code is as below
direct_invoice.html


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script type="text/javascript" src="js/direct_invoice_table.js">

</script>

<html>
     <head>
          <title>Direct Invoice</title>
     </head>
     <body leftmargin="0" topmargin="0">
	 
	 <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
	  <b> Invoice</b></p>
	 
		<table id="Client_Details">
		  <tr>
			<th>Client Name:</th>
			<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
		  </tr>
		  <tr>
			<th>Client Address:</th>
			<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
		  </tr>
		  <tr>
		  <td></td>
			<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>			
		  </tr>
		  <tr>
			<th>Pin Code:</th>
			<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>		
		  </tr>		  
		  <tr>
			<th>City/State/Country:</th>
			<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
			<td><input type="text" id="client_state" size="10"  maxsize="20" /></td><td>/</td>
			<td><input type="text" id="client_country" size="10" maxsize="20" /></td>			
		  </tr>
		<tr>
			<th>Email Address:</th>
			<td><input type="text" name="client_city" size="10" maxsize="30" /></td>			
		  </tr>
		<tr>
			<th>TIN/PAN:</th>
			<td><input type="text" name="tin_or_pan" size="10" maxsize="20	" /></td>			
		  </tr>		  
		</table>
	 
	                <table align="center" width = "75%">
                    <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>
									 	<th>Item No</th>
										<th>Item Name</th>
										<th>Description</th>
										<th>Unit Cost</th>
										<th>Quantity</th>
										<th>Price</th>
										<th> <font color="RED">Delete</font></th>
                                   </tr>
									<tr>
										<td>1</td>
					<td><input type="text" name="itemname[]"  size="40" "maxsize="100"/></td>
					<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
					<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
					<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
					<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
								   </tr>
							  </table>
								<table id="totaltbl" align="right">
								<tr>
								  <td></td>
								 </tr>
								  <tr>
									<th>Vat %</th>
									<td><input type="text" name="total" size="3" maxsize="3" /></td>
								  </tr>
								  <tr>
									<th>Total</th>
									<td><input type="text" id = "total"  name="total" size="20" maxsize="100" /></td>
								  </tr>
								</table>

	
                         </td>
                    </tr>
               </table>
          <form action="save_entry.php" name="eval_edit" method="post" format="html">
					<p>	
						<input type="button" value="Add Row" onclick="addRow();" />	
						<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />	
						<input type="button" value="Print" />
					
					</p>
          </form>
		  
		  	 <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
	  </p>
	  <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
	  	  <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
     </body>
</html>

***************

The below is the javascript function that i wrote


Code:

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 cellRight1 = 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 itemname, 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 itemname8. super fantastic.
          // the exact same thing with a unique id
          el.id = 'itemname[]'+ iteration;
          // set it to size of 40. setting sizes is good.
          el.size = 40;
          // same thing as earlier, append our element to our freshly and clean cell
          cellRight1.appendChild(el);
		  
    	  var cellRight2 = row.insertCell(2);
          var e2 = document.createElement('input');
          e2.type = 'text';
          e2.id = 'description[]' + iteration;
          e2.size = 20;
	      e2.maxsize = 100;
          cellRight2.appendChild(e2);

    	  var cellRight3 = row.insertCell(3);
          var e3 = document.createElement('input');
          e3.type = 'text';
          e3.id = 'unitcost[]' + iteration;
          e3.size = 10;
 	      e3.maxsize = 100;
          cellRight3.appendChild(e3);
	
    	  var cellRight4 = row.insertCell(4);
          var e4 = document.createElement('input');
          e4.type = 'text';
          e4.id = 'quantity[]'+ iteration;
          e4.size = 4;
 	      e4.maxsize = 100;
	
          cellRight4.appendChild(e4);

    	  var cellRight5 = row.insertCell(5);
          var e5 = document.createElement('input');
          e5.type = 'text';
          e5.id = 'price[]'+ iteration;
          e5.size = 10;
		  e5.maxsize = 100;
		  
          cellRight5.appendChild(e5);
	  
		 // var cellRight7 = row.insertCell(7);
         // var e7 = document.createElement('input');
         // e7.type = 'CHECKBOX';
         // e7.id = 'cancel[]';
         // cellRight7.appendChild(e7);
		
		  var cellRight6  = row.insertCell(6);
		  cellRight6.innerHTML = "&nbsp;&nbsp;<input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
		
          e4.onclick = dynamic_onc();	
			
     }

	function removeRow(src)
	{
		/* src refers to the input button that was clicked.	
		   to get a reference to the containing <tr> element,
		   get the parent of the parent (in this case case <tr>)
		*/			
		var oRow = src.parentElement.parentElement;		
		
		//once the row reference is obtained, delete it passing in its rowIndex			
		document.all("mySampleTable").deleteRow(oRow.rowIndex);		
	}
	function countRow()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 	function CalculatePrice()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 
	     function onc() {
	
        var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
			alert(b);
	document.getElementById('price[]').value =c;
	
 }
		
		function dynamic_onc()
		{
		alert('Jay'	);
		e5.value =7;		
		}
		
		function Totalcal() {
		var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
		alert(b.value);
		document.getElementById('price[]').value =c;
		}