i have a grid with with say 20 columns
when executed the grid gets converted to table
i need a div to be displayed in the column when the column header cell of that particular is clicked
The basic strategy is “when element A is clicked, display element B in element C.”
So you’re going to need to do the following:
- Listen for a click on element A (your header).
- Based on which element was clicked, figure out which elements you’ll use for B (the <div>; maybe just create it on the fly, when the header is clicked?) and C (the column; maybe just find it relative to your header, based on the DOM, like with firstChild, nextSibling, etc).
- Insert B into C somehow (appendChild, insertBefore, innerHTML, insertAdjacentHTML, jQuery’s append method, etc).
But it’s entirely possible I misunderstood, so…
Question Time
- Can you explain a little bit more about “the grid gets converted to table”? Do you mean that you have 20 <div> elements in a row, but then a script is run that turns all of them into an actual <table>? Or are they just styled to appear like a table?
- How many rows does the table have?
- How do you want to build the <div> that get’s displayed? Does it depend on the content of the header, or the content of the column itself, or is it always the same, regardless of column?
- Do you want there to be some way of hiding the <div> once it has been shown?
- Can more than one of these dynamic <div>s be displayed at a time? Or should it move from column to column as the user clicks?
a i dp have
<table id=“mytable” width=“200%” cellpadding=“0”>
<tr>
<td>name</td>– header cell
<td>age</td>– header cell
<td>add</td>– header cell
<td>desig</td>– header cell
<td>dep</td>– header cell
<td>salar</td>– header cell
<td>loca</td>– header cell
<td>ci</td>– header cell
<td>coun</td>– header cell
<td>road</td>– header cell
<td>11</td>– header cell
<td>12</td>– header cell
<td>13</td>– header cell
<td>14</td>– header cell
</tr>
<tr>
<td>1</td>–data cell
<td>2</td>–data cell
<td>3</td>–data cell
<td>4</td>–data cell
<td>5</td>–data cell
<td>6</td>–data cell
<td>7</td>–data cell
<td>8</td>–data cell
<td>9</td>–data cell
<td>10</td>–data cell
<td>11</td>–data cell
<td>12</td>–data cell
<td>13</td>–data cell
<td>14</td>–data cell
</tr>
</table>
<div id=“div1” runat=“server”>
when header cell is clicked ie suppose users click on heade cell dep a div shld be displaed
inline with that header cell
suppose users click on heade cell name a div shld be displaed
inline with that header cell
means a div shld be displaed in column name
i dont have a direct table as above . i have a grid in m design which when execued is displaed as above
i hope i am clear
currentl i have a javacript to get the column header cell name
More Questions
- When you say “inline with that header cell”, do you mean in the header cell, or in the corresponding data cell, under the header?
- When you say “a div shld be displaed”… what div? That last div at the end, with runat=“server”?
ya the div shld appear comming fm the clicked header cell
currently i have only one div which i am trying to position as per the clicked header cell cordinates
Sorry for the endless questions, but when you say “shld appear comming fm the clicked header cell”, does that mean animation? Can you maybe do some very quick visual mock-ups explaining the before and after of what you’re trying to do?
as i said i have a table with column name s & data rows
first i want that when the users click on any header cell a control(div) should be displayed in that clicked column with the control(div) top on the table cell header
hope i am clear
Still don’t quite get it, sorry. I drew some pictures of what I think you’re looking for (they’re attached in the post, as well as uploaded here and [url=http://i.imgur.com/gK0yk.png]here). Correct as necessary; also, posting the code that you do have (the HTML you’re working with, the JS you’ve tried) wouldn’t hurt.
![here and [url=http://i.imgur.com/gK0yk.png]here](http://i.imgur.com/OrQYs.png){kind=link}