By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,389 Members | 2,052 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,389 IT Pros & Developers. It's quick & easy.

Add rows dynamicaly, lock more then one coloumn

P: 2
Hi

i got some javascript from (*) these site for lock one column with js and header row with css.
i am not a programmer i am a designer. i am working in a small company. i don't find such programmer/program that helps me in this situation.

i got add rows from this site:

* http://www24.brinkster.com/scriptbreaker/home.htm

i got lock columns from this site:

* http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html

see the code. what i want is

1. adding row 10 rows dynamically and when press a button add a single row each time.
2. lock columns more then 1 row.while page loads();

[HTML]<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
DIV#tbl-container
{
OVERFLOW: auto;
WIDTH: 100%;
SCROLLBAR-BASE-COLOR: #3cced;
HEIGHT: 200px
}
TABLE
{
TABLE-LAYOUT: fixed;
BORDER-COLLAPSE: collapse;
BACKGROUND-COLOR: whitesmoke
}
DIV#tbl-container TABLE TH
{
WIDTH: 100px;
}
THEAD TH
{
BORDER-RIGHT: silver 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
CURSOR: default;
COLOR: white;
POSITION: relative;
BACKGROUND-COLOR: navy;
TEXT-ALIGN: center
}
THEAD TH
{
Z-INDEX: 20;

TOP: expression(document.getElementById("tbl-container").scrollTop-2)
}
/*colmslocked*/
THEAD TH.locked
{
BORDER-RIGHT: silver 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
CURSOR: default;
COLOR: white;
POSITION: relative;
BACKGROUND-COLOR: navy;
TEXT-ALIGN: center
}
THEAD TH.locked
{
Z-INDEX: 30
}
TD.locked
{
BORDER-RIGHT: silver 1px solid;
FONT-WEIGHT: bold;
Z-INDEX: 10;
;
LEFT: expression(parentNode.parentNode.parentNode.parent Node.scrollLeft);
POSITION: relative;
BACKGROUND-COLOR: #ffeaff
}
TH.locked
{
BORDER-RIGHT: silver 1px solid;
FONT-WEIGHT: bold;
Z-INDEX: 10;
;
LEFT: expression(parentNode.parentNode.parentNode.parent Node.scrollLeft);
POSITION: relative;
BACKGROUND-COLOR: #ffeaff
}

</style>
<SCRIPT type=text/javascript>
function lockCol(tblID) {

var table = document.getElementById(tblID);
var cTR = table.getElementsByTagName('TR'); //collection of rows

if (table.rows[0].cells[0].className == '') {
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = 'locked'
}
}
}

function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("column 1"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("column 2"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}


</SCRIPT>
</HEAD>

<BODY onload="lockCol('tbl')">
<table>
<tr>
<td><label>Add</label>
<input type="text" size="2" maxlength="2" name="numOfAddLines"
id="numOfAddLines" value="1" tabindex="4" onchange="javascript:modified();" />
<input type="hidden" name="addLinesString" >
<label>Line(s)</label>&nbsp;&nbsp<input type="button"
onClick="javascript:addRow('tbl')" tabindex="5"/></td>
</tr>
</table>
<div id=tbl-container>
<table id=tbl>
<thead>
<th>Sno</th>
<th>Name</th>
<th>Class</th>
<th>Subj1</th>
<th>Subj2</th>
<th>Subj3</th>
<th>Subj4</th>
<th>Subj5</th>
<th>Subj6</th>
<th>Subj7</th>
<th>Subj8</th>
<th>Subj9</th>
<th>Subj10</th>
<th>Subj11</th>
<th>Subj12</th>
<th>Subj13</th>
<th>Subj14</th>
<th>Subj15</th>
</thead>
<tbody>
<tr>
<td><input type="text" size="5" /></td>
<td><input type="text" size="30"/></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
<td><input type="text" size="10" /></td>
</tr>
</table>
</div>
</BODY>
</HTML>[/HTML]

Hope you floks can help me ..waiting for your early response
Attached Files
File Type: zip tablecol.zip (1.4 KB, 79 views)
Jan 16 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
1. adding row 10 rows dynamically and when press a button add a single row each time.
When you say add 10 rows dynamically do you mean on page load? You have a field for the number of rows - do you want to make use of that?
Jan 16 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.