I am trying to close the modal by clicking the cross icon which is in the modal and the modal is rendered inside a td and the whole tr is made clickable. I am using tailwind for my CSS. The problem is the modal does not get closed on click the cross icon.
<tr onclick= "show_modal(this)">
<td><%=device&.name%></td>
<td ><%= render partial: 'edit', locals: {device: device}%></td>
</tr>
Partial file(_edit.html.erb)
<div class="modal-holder js_modal_container modal__hidden">
<div class="modal-header">
<h5>device</h5>
<i class="fas fa-times js_device_modal_close_btn" onclick="close_modal(this)"></i>
</div>
<div class="modal-body">
<!-- modal body -->
</div>
</div>
</div>
js i have tried.
window.show_modal =function(e){
let js_modal_container = $(e).find(".js_modal_container")
if ($(this).is("td:last-child")) {
e.preventDefault();
e.stopPropagation();
$(js_modal_container).addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
};
$(js_modal_container).removeClass("modal__hidden");
$(document.body).addClass("overlay__handler");
}
window.close_modal = function(e){
let js_modal_container= $(e).closest(".js_modal_container")
a =$(e).closest(".modal_popup")
if ($(a).is("td:last-child")){
// e.preventDefault();
// e.stopPropagation();
$(js_modal_container).addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
}
// $(js_modal_container).addClass("modal__hidden");
// $(document.body).removeClass("overlay__handler");
}
Consider the following example.
$(function() {
function openModal(e) {
console.log("Open Modal Fired.");
var $this = $(e.target);
console.log($this.text().trim());
var js_modal_container = $(".js_modal_container");
$(".modal-header h5").html($this.prev("td").text().trim());
js_modal_container.removeClass("modal__hidden");
$(document.body).addClass("overlay__handler");
}
function closeModal(e) {
console.log("Close Modal Fired.");
var $this = $(e.target);
var js_modal_container = $this.closest(".js_modal_container");
js_modal_container.addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
}
$("table tr").on("click", "td:last-child", openModal);
$("i.js_device_modal_close_btn").click(closeModal);
});
table {
width: 340px;
}
td:last-child {
border: 1px solid #222;
border-radius: 6px;
text-align: center;
}
.modal-holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);
}
.modal__hidden {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
Device Name 1
</td>
<td>
Edit
</td>
</tr>
<tr>
<td>
Device Name 2
</td>
<td>
Edit
</td>
</tr>
<tr>
<td>
Device Name 3
</td>
<td>
Edit
</td>
</tr>
</table>
<div class="modal-holder js_modal_container modal__hidden">
<div class="modal-header">
<h5>device</h5>
<i class="fas fa-times js_device_modal_close_btn"></i>
</div>
<div class="modal-body">
<!-- modal body -->
</div>
</div>
For ease of use, I have created two functions to use and bound them to click events on various elements in the page. For the Edit item, I used .on() in case they are not available when the page initially loads or if new items are appended.
$(e) is not an element, but an event. We need to look at the Event Target: e.target. This will return an element that can be used as a jQuery Object: $(e.target). I suspect this was the primary issue in your code. The rest is just for clarification of the example.
Related
First of all the view page shows only two buttons leave and attendance.
when i click the leave button i shows the table(tb2).and again i click the that button it hide the table
When i click the attendance i display the another table(tb3).it is same as previous
Now for me i want when i click the leave button the opened attendance table should be closed and it same for the attendance button.
My code:
var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);
function myfunction() {
var tablewrap = document.getElementById('tb2');
tablewrap.classList.toggle('show')
};
var click = document.getElementById('click');
click.addEventListener('click', myfunction);
function myfunction() {
var tablewrap = document.getElementById('tb3');
tablewrap.classList.toggle('show')
};
var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);
function myfunction() {
var tablewrap = document.getElementById('tb2');
tablewrap.classList.toggle('show');
document.getElementById('tb3').classList.remove('show');
};
var click = document.getElementById('click');
click.addEventListener('click', myfunction);
function myfunction() {
var tablewrap = document.getElementById('tb3');
tablewrap.classList.toggle('show');
document.getElementById('tb2').classList.remove('show')
};
Remove the classes explicitly
Use JQuery it will make things easy.
$('#btnLeave').click(function(){
if($('#tblLeave').css('display')=='none'){
$('#tblLeave').css('display','block');
} else {
$('#tblLeave').css('display','none');
}
});
$('#btnAttendance').click(function(){
if($('#tblAttendance').css('display')=='none'){
$('#tblAttendance').css('display','block');
} else {
$('#tblAttendance').css('display','none');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnLeave">Leave</button>
<button id="btnAttendance">Attendance</button>
<br><br>
<table id="tblLeave" style="border: 1px solid; width: 100%; display: none">
<thead>
<td>Leave<td>
</thead>
<table>
<br>
<table id="tblAttendance" style="border: 1px solid; width: 100%; display: none">
<thead>
<td>Attendance<td>
</thead>
<table>
Or Alternating the show and hide of two tables
$('#btnLeave').click(function(){
if($('#divLeave').css('display')=='none'){
$('#divLeave').css('display','block');
$('#divAttendance').css('display','none');
}
});
$('#btnAttendance').click(function(){
if($('#divAttendance').css('display')=='none'){
$('#divAttendance').css('display','block');
$('#divLeave').css('display','none');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnLeave">Leave</button>
<button id="btnAttendance">Attendance</button>
<br><br>
<div id="divLeave">
<table id="tblLeave" style="border: 1px solid; width: 100%;">
<thead>
<td>Leave<td>
</thead>
</table>
</div>
<br>
<div id="divAttendance" style="display: none; position: absolute; top: 47px; width: 100%">
<table id="tblAttendance" style="border: 1px solid; width: 100%">
<thead>
<td>Attendance<td>
</thead>
</table>
</div>
I have this project where the user selects an item from a list (fetched from a MySQL database), then outputs buttons named from the item
as such:
My (stripped down) code so far:
<!DOCTYPE html>
<html>
</head>
<body>
<h2>Select User:</h2>
<div>
<form method="POST">
<table border="5">
<thead>
<th></th>
<th>Subject</th>
</thead>
<tbody>
<?php
include('get.php');
$query=mysqli_query($conn,"select * from `subjects`");
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><input type="checkbox" value="<?php echo $row['subject']; ?>" name="id[]"></td>
<td><?php echo $row['subject']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
<div>
<h2>Subjects selected:</h2>
<?php
if (isset($_POST['submit'])){
foreach ($_POST['id'] as $id):
$sq=mysqli_query($conn,"select * from `subjects` where subject='$id'");
$srow=mysqli_fetch_array($sq);
?>
<button class="button animate" id="myBtn">
<span>
<?php echo $srow['subject']; ?>
</span>
</button>
<?php
endforeach;
}
?>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I was able to make a modal for one button but I want to make a unique modal for each button. How can I do this? Thanks.
Write a function which will build a modal for you. Have this function accept some input, like the content of the modal which you want to show. Then add the modal to the page. This way you can generate an infinite amount of different modals based on the button that you click on.
I've made an example below which demonstrates how this could work. The example works with building a modal, with the same structure of your example, and use the value attribute of the button the set the content of that modal. For simple text this works fine, but for larges chunks of HTML you might consider getting your content from a hidden element and copy the innerHTML value of that element.
// Flag for checking if a modal is already opened.
// This way we can keep track of the opened modal and
// not open a second one before closing the first.
let modalOpen = false;
function createModal(html = '') {
// Create the elements.
const modal = document.createElement('div');
const content = document.createElement('div');
const close = document.createElement('span');
// Add classes to the elements.
modal.classList.add('modal');
content.classList.add('modal-content');
close.classList.add('close', 'js-close-modal');
// Add content to the elements.
content.insertAdjacentHTML('beforeend', html);
close.innerHTML = '×';
// Append children to parents and to the document.
content.appendChild(close);
modal.appendChild(content);
document.body.appendChild(modal);
return modal;
}
// Listen for clicks in the document.
document.addEventListener('click', event => {
// If the create modal button has been clicked, create a modal.
const button = event.target.closest('.js-create-modal');
if (button !== null && modalOpen === false) {
const html = button.value;
createModal(html);
modalOpen = true;
}
// If the close modal has been clicked, remove the modal.
const close = event.target.closest('.js-close-modal');
if (close !== null) {
const modal = close.closest('.modal');
modal.remove();
modalOpen = false;
}
});
*, *::before, *::after {
box-sizing: border-box;
}
.modal {
display: block;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 90%;
max-width: 32em;
max-height: 48em;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
padding: 15px;
transform: translate(-50%, -50%);
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 5px;
z-index: 99;
}
.modal-content {
padding: 15px;
}
.close {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
<button class="js-create-modal" value="This is my first modal.">Modal 1</button>
<button class="js-create-modal" value="All the modals have their own content.">Modal 2</button>
<button class="js-create-modal" value="And are unique in every way.">Modal 3</button>
Another way would be to have a single modal on the page, which you show and hide. Whenever you click a button, you should modify the content of the modal based on the button that you clicked. That way you only have to modify a single piece. But hey, if a modal is hidden, why not just remove it and build a new one when you need it? Your choice.
I'm trying to make a simple tictactoe game and starting off, I've run into a problem. I'm planning to have a unique value associated with each table cell (td) and a unique id with each Div inside them.
So my plan is to have an onClick event with each td element that takes both of these values as parameters. However when I tried to do a simpler version where I simply console.log'd the value of the td element all I got was undefined. So I'm wondering whats wrong with this code.
function valueToggle(child, parent){
console.log(parent. value)
//this function takes the child node and the parents node's value, it then logs the value of the paret node.
}
function playerGo(num){
if(num % 2){
this.innerHtml = "X"
}
else{
this.innerHtml = "O"
}
//this function wi;; signal who's go it is, allowing the value Toggle to
//set the right value to what is clicked next
}
function reset(){
//this resets the game
}
function didYouWin(){
//CHecks to see if a player has won every time a move is made
}
#game{
margin: auto;
}
table {
background-color: #e6e6e6;
width: 420px;
height: 420px;
margin-left: auto;
margin-right: auto;
}
td {
border: 2.5px solid black;
height: 140px;
width: 140px;
text-align: center;
vertical-align: middle;
font-size: 80px;
}
#cell-1{
}
#cell-2{
}
#cell-3{
}
#cell-4{
}
#cell-5{
background-color:
}
#cell-6{
background-color:
}
#cell-7{
background-color:
}
#cell-8{
background-color:
}
#cell-9{
background-color:
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anton Game</title>
<link rel="stylesheet" href="./antonvers.css">
</head>
<body>
<div id="game">
<div id="player">
<h2>
<span id="pShow">Player:</span>
<span id="pColor">X</span>
</h2>
</div>
<table id="board" cellpadding="0" cellspacing = "0">
<tr>
<td onClick = "valueToggle(this.childNode, this)" value = 0>
<div id="cell-1">X</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div id="cell-2">O</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div id="cell-3">X</div>
</td>
</tr>
<tr>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-4">O</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-5">X</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-6">O</div>
</td>
</tr>
<tr>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-7">O</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-8">X</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-9">O</div>
</td>
</tr>
</table>
<div id="resetButton">
<button>Reset</button>
</div>
</div>
<script src="./antonvers.js"></script>
</body>
</html>
There's a few problems here.
First, when you use HTML "onclick" attributes, when a handler is called this is set to the element to which the handler is attached, but the handler is not actually bound to the element it's attached to (it's still bound to the window). If you attach the handler once the HTML has been fully parsed and the DOM has been created this will be bound to the element and you would not have to override the Event usually passed as the first argument of an event handler.
Second, only input elements have value properties, so setting a value attribute on a td will not translate into a value property. You could use a data- attribute to simulate this, or obtain the value by examining the custom "value" attribute with .getAttribute()
I've modified your snippet to show possible corrections:
var player = 1;
function valueToggle(event){
//this function takes the child node and the parents node's value, it then logs the value of the paret node.
let div = event.target.getElementsByTagName('div')[0].innerHTML = ["X","O"][player%2];
}
function playerGo(num){
if(num % 2) {
this.innerHTML = "X"
}
else {
this.innerHTML = "O"
}
//this function wi;; signal who's go it is, allowing the value Toggle to
//set the right value to what is clicked next
}
function reset(){
//this resets the game
}
function didYouWin(){
//CHecks to see if a player has won every time a move is made
}
document.addEventListener("DOMContentLoaded", function() {
for (let td of document.querySelectorAll("#board td")) {
td.onclick = valueToggle;
}
});
#game{
margin: auto;
}
table {
background-color: #e6e6e6;
width: 420px;
height: 420px;
margin-left: auto;
margin-right: auto;
}
td {
border: 2.5px solid black;
height: 140px;
width: 140px;
text-align: center;
vertical-align: middle;
font-size: 80px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anton Game</title>
<link rel="stylesheet" href="./antonvers.css">
</head>
<body>
<div id="game">
<div id="player">
<h2>
<span id="pShow">Player:</span>
<span id="pColor">X</span>
</h2>
</div>
<table id="board" cellpadding="0" cellspacing = "0">
<tr>
<td data-value="0"><div id="cell-1"></div></td>
<td data-value="0">
<div id="cell-2"></div>
</td>
<td data-value="0">
<div id="cell-3"></div>
</td>
</tr>
<tr>
<td data-value="0">
<div class="cell-4"></div>
</td>
<td data-value="0">
<div class="cell-5"></div>
</td>
<td data-value="0">
<div class="cell-6"></div>
</td>
</tr>
<tr>
<td data-value="0">
<div class="cell-7"></div>
</td>
<td data-value="0">
<div class="cell-8"></div>
</td>
<td data-value="0">
<div class="cell-9"></div>
</td>
</tr>
</table>
<div id="resetButton">
<button>Reset</button>
</div>
</div>
<script src="./antonvers.js"></script>
</body>
</html>
Use console.log(parent.getAttribute('value')) instead of parent.value.
From the MDN documentation:
getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string);
i am having trouble in placing my div in front of my table
here is my css for the div I want to pop up
#sc_div_option{
width:300px;
height:300px;
border:solid gray 1px;
display:none;
position: fixed;
float:right;
background-color:green;
z-index:99999999999999999999999999;
}
and here is my table style
#excel_table{
width:auto;
height:100%;
background-color:#fff;
min-height: 30%;
z-index: -1;
}
I already added z-index and position but does not work
appreciate your help
maybe you are wondering why I am doing this..
i want to have a menu list when I click one of my table data and pop up the div in front here is my jquery responsible for that
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(document).on("click",".scname_value",function(){
$('#sc_div_option').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
})
Tingug sad tawn mo please bitaw ni...
here is my image to show the problem
Just basically set your z-indexes for your content div set z-index: 1 and for the div to pop up to z-index: 2
The CSS z-index property only works on positioned elements. The only issue you seem to have is that #excel_table doesn't have a position attribute. Just set it to relative or absolute (in your case, relative seems to be what you want).
Example of z-index with and without position attributes: https://jsfiddle.net/7zxgrb3k/1
var dir = document.querySelectorAll('div');
for(var i=0; i<dir.length; ++i) {
dir[i].appendChild(document.createTextNode(dir[i].className));
}
.absolute { position: absolute; }
.relative { position: relative; }
.front { z-index: 10; }
.back { z-index: 0; }
div {
display: inline-block;
margin-right: -20px;
background-color: #333;
border: solid 4px #eee;
border-left: solid 4px #e00;
border-right: solid 4px #00e;
color: #eee;
width: 100px;
height: 100px;
}
<div class="front"></div>
<div class="back"></div>
<div class="front"></div>
<br />
<br />
<div class="front relative"></div>
<div class="back relative"></div>
<div class="front relative"></div>
<br />
<br />
<div class="front absolute"></div>
<div class="back absolute"></div>
<div class="front absolute"></div>
from my understanding , you want to show the popup on top of your table.
for that you have to play with css position.
I have fiddled the code here. you can refer that.parent div of your popup should be of position relative and position of popup should be absolute. and you can set the position from jquery as well as you did for now.
HTML
<div class="table-wrapper">
<table class="my-table">
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
</table>
<div class="my-popup">this is my div</div>
</div>
CSS
.table-wrapper{
position:relative;
}
.my-table td {
padding:5px;
border:1px solid #aaa;
}
.my-popup {
width:100px;
height:100px;
position:absolute;
background-color:red;
bottom:0px;
left:0px;
}
just try this and let me know if it works
Use this Javascript code: here is JSfiddle
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
console.log(var);
var sc_div_option = document.getElementById("sc_div_option");
sc_div_option.style.display = "block";
sc_div_option.style.top = y+"px";
sc_div_option.style.left = x+"px";
sc_div_option.innerHTML = coords;
}
Or use bootstrap modal. Here is JsFiddle
You have to use bootstrap modal. You have to put tha div id as data-target attribute value . Assign the bellowed think as your div css attributes. And in the div add other divs content, header, footer. Enjoy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src = "https://code.jquery.com/jquery.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script>
<table border="1">
<tr><td col>
<p data-toggle="modal" data-target="#sc_div_option">Click Here11</p>
</td> <td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here12</p>
</td><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here13</p>
</td><tr>
<tr><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here21</p>
</td><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here22</p>
</td><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here23</p>
</td><tr>
</table>
<div class="modal fade" id="sc_div_option" tabindex="-1" role="dialog" aria-labelledby="id" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Header
</div>
<div class="modal-body">
Body
<div class="modal-footer">
Footer
</div>
</div>
</div>
</div>
</div>
What I have?
A html-table which has a lot of rows.
A hidden (display=none) div which contains some input controls (lets call it "div-to-display"). Only one div-to-display in whole page.
What I'm trying to do?
When the mouse hovers on the first cell in each row - show the "div-to-display" below it (like tool tip).
But, I can't create a separated div-to-display div for each table row. All cells must use the same "div-to-display" element.
While showing the div-to-display div, it should be float. What it means is that it won't change the location of the other cells in the table. It will be above them.
Do you have idea how to do this with jquery`javascript`?
DEMO: http://jsfiddle.net/sBtxq/
JQuery
// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');
CSS
.div-to-display {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
background-color: #eee;
z-index: 10;
}
td {
position: relative;
}
td:hover > .div-to-display {
display: block
}
Updated (non-JS) version
CSS
td {
position: relative;
}
td:after {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
background-color: #eee;
z-index: 10;
content: "yay";
}
td:hover:after {
display: block
}
DEMO: http://jsfiddle.net/sBtxq/20/
use jquery offset() method to get position of hover of those elements and apply that as a left and top for the div. (Make sure to position the div as ABSOLUTE).
If you want a simple solution try using tooltip plugins. There will be loads available out there. One such is jquery UI tooltip plugin.
Style it on your own
#div-to-display{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
z-index:99999;
display:none;
}
add this class="toHover" to each or table rows whom on hover you want to show div
add this function
window.onload = function(){
$('.toHover').each(function() {
$(this).mouseenter(function(){ $('#div-to-display').show(); });
$(this).mouseleave(function() { $('#div-to-display').hide();});
});
}
Html For i.e.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</table>
<div id="divInput" style="display:none;position:absolute;">
<input type="type" name="name" value=" " />
</div>
jQuery:
<script type="text/javascript">
var s = 'ss';
$('table tr').each(function () {
var this_tr = $(this);
this_tr.find('td:first').mouseenter(function () {
var this_td = $(this);
$('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
$('#divInput').show();
}).mouseout(function () {
var this_td = $(this);
$('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
$('#divInput').hide();
})
})
</script>