Reputation: 13
Here is my code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$('.edit_button').click(function(){
console.log($(this).siblings().text());
modifications($(this));
});
});
function modifications(cell){
var form = '<form> <input type="text" id = "newText" size = "30" value='+cell.siblings().text()+'></form>';
cell.parent('td').append(form).focus();
cell.parent().children('.link').toggle();
$('#newText').keypress(function (e) {
if (e.which == 13) {
console.log("form submitted");
e.preventDefault();
var new_text = cell.parent('td').children('#newText').val();
//Show hyperlink with new value
cell.parent().children('.link').toggle();
cell.parent().children('.link').text(new_text);
//Hide text box
cell.parent().children('.newText').hide();
}
});
}
</script>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Company</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Sergey brin</td>
<td>Google</td>
<td class="email">
<a class = "link" href= "www.gmail.com" > [email protected] </a>
<button class = "edit_button" type="button" style = "float:right" >Edit !</button>
</td>
</tr>
<tr>
<td>Elon Musk</td>
<td> Amazon </td>
<td class="email">
<a class = "link" href = "www.spacex.com">[email protected] </a>
<button class= "edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
<tr>
<td> Bill Gates </td>
<td> Microsoft </td>
<td class="email">
<a class = "link" href = "www.microsoft.com"> [email protected] </a>
<button class="edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
</table>
</body>
</html>
Problem Statement : I want a textbox to appear when edit button is clicked, and after editing when enter is pressed the contents of the textbox should change to hyperlink, else if Escape is pressed original contents of the hyperlink should be restored.
What am I missing here? I am not even able to fetch value from the textbox. Can somebody brainstorm with me?
Upvotes: 1
Views: 363
Reputation: 411
Here is your solution.
$(function(){
$('table').delegate('.edit_button', 'click', function (e) {
var target = $(this);
var link = target.siblings('.link');
var input;
if (target.siblings('.newText').length === 0) {
target.before('<input type="text" class="newText" size="30" value='+link.text()+'>');
link.toggle();
input = target.siblings('.newText');
input.focus();
input.keypress(function (e) {
if (e.which === 13) {
e.preventDefault();
link.text(input.val()).toggle();
input.remove();
} else if (e.which === 0) {
e.preventDefault();
link.toggle();
input.remove();
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>Company</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Sergey brin</td>
<td>Google</td>
<td class="email">
<a class="link" href="www.gmail.com" > [email protected] </a>
<button class="edit_button" type="button" style="float:right" >Edit !</button>
</td>
</tr>
<tr>
<td>Elon Musk</td>
<td> Amazon </td>
<td class="email">
<a class="link" href="www.spacex.com">[email protected] </a>
<button class="edit_button" type="button" style="float:right">Edit !</button>
</td>
</tr>
<tr>
<td> Bill Gates </td>
<td> Microsoft </td>
<td class="email">
<a class = "link" href = "www.microsoft.com"> [email protected] </a>
<button class="edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
</table>
Upvotes: 1
Reputation: 11611
You made something invalid, even the HTML
part! the valid structure of an HTML
file is:
<!DOCTYPE html>
<html>
<head>
<!-- you may load some css and/or js files here -->
</head>
<body>
<!-- here you can add your html elements, such as `table`, `div`, and so on -->
</body>
</html>
So, you need first fix this, as first job !
Also try .prev()
, instead of siblings()
, as below:
cell.prev().text();
And make below changes:
$('table').delegate('#newText', 'keypress', function (e) {
// rest of code
}
Upvotes: 0