how to make view console in table content

Question

i try to make a simple table in my web like usually. but i have no idea how to make a display for edit and view another content according to this each table content.

<body>
<table width="1023" height="248" border="1">
  <tr>
    <th colspan="2" scope="col">A1</th>
    <th colspan="2" scope="col">A2</th>
    <th colspan="2" scope="col">A3</th>
    <th colspan="2" scope="col">A4</th>
    <th colspan="2" scope="col">A5</th>
    <th colspan="2" scope="col">A6</th>
    <th colspan="2" scope="col">A7</th>
    <th colspan="2" scope="col">A8</th>
    <th colspan="2" scope="col">A9</th>
  </tr>
  <tr>
    <td><div align="center">A1.4</div></td>
    <td><div align="center">A1.8</div></td>
    <td><div align="center">A2.4</div></td>
    <td><div align="center">A2.8</div></td>
    <td><div align="center">A3.4</div></td>
    <td><div align="center">A3.8</div></td>
    <td><div align="center">A4.4</div></td>
    <td><div align="center">A4.8</div></td>
    <td><div align="center">A5.4</div></td>
    <td><div align="center">A5.8</div></td>
    <td><div align="center">A6.4</div></td>
    <td><div align="center">A6.8</div></td>
    <td><div align="center">A7.4</div></td>
    <td><div align="center">A7.8</div></td>
    <td><div align="center">A8.4</div></td>
    <td><div align="center">A8.8</div></td>
    <td><div align="center">A9.4</div></td>
    <td><div align="center">A9.8</div></td>
  </tr>
</body>

my concept, when the pointer of user close to 1 content of table, the display automaticlly shown for act view or input new data. Please advice

for exp. like on view gmail web client. when user cursore close to one of name sender email in inbox, the console automaticly shown for add contact etc..but in gmail just for the name of sender

Answer 1

You can solve your problem by pure javascript or jquery :

javascript solution

//this function create our layout which will be displayed on mouse over
function createOverlay(){
var div = document.createElement("div");
div.innerHTML = "your own code here";
div.id = "overlay";
div.display="none";
div.style.position="absolute";
div.style.border="1px solid";
document.body.appendChild(div);
}

//this function show layout
function showOverlay(el){
if(!document.getElementById("overlay"))
createOverlay();
var div = document.getElementById("overlay");
div.style.display="block";
div.style.width="200px";
div.style.height="200px";
div.style.top = parseInt(el.offsetTop)+"px";
div.style.left=parseInt(el.offsetLeft)+parseInt(div.style.width)/4+"px";
div.onmouseover = function(event){event.stopPropagation();return false;}
}

// and this function hide - you can use it for "close" button on overlay
function hideOverlay(){
document.getElementById("overlay").style.display="none";
}

here is the code which add event handlers to td elements of your table
var table = document.getElementsByTagName("table")[0];
var tds = table.getElementsByTagName("td");
var flag=true;
if(document.getElementById("overlay")){
if(document.getElementById("overlay").style.display!="none")
flag=false;
}
for(i in tds){
tds[i].onmouseover = function(event){if(flag){showOverlay(this);event.stopPropagation()}else{return false;}};
}

Here we handle the onmouseover event on each td element and when it happens - show the overlay ( div ) which can contain any HTML code

Also you can add background to div, and edit position of div by editing this lines

div.style.top = parseInt(el.offsetTop)+"px";
div.style.left=parseInt(el.offsetLeft)+parseInt(div.style.width)/4+"px";

You can also do this thing by JQuery and it will be less code :)

Also i recommend you to read about events in javascript

Cheers.

how to make view console in table content

Question

1 answers

solution1
2 ACCPTED 2013-03-26 08:27:05

how to make view console in table content

Question

1 answers

solution1 2 ACCPTED 2013-03-26 08:27:05

solution1
2 ACCPTED 2013-03-26 08:27:05