how to edit label value after clicking on a href with javascript? - javascript

i have:
<tr>
<td align="left">Phonenr:</td>
<td align="left"><b>
<label style="color: #662819;" id="phone">911</label>
</b></td>
<td>Change phone</td>
</tr>
how can i edit phonenumber after clicking on a href="#" and changing(which way?) label into textfield/box?

Based on Change Label to Textbox on edit hyperlink click
Live Demo
$(function() {
$('a.edit').on("click",function(e) {
e.preventDefault();
var dad = $(this).parent().parent();
var lbl = dad.find('label');
lbl.hide();
dad.find('input[type="text"]').val(lbl.text()).show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});

Try:
$('tr a').click(function() {
var label = $(this).parent().prev().find('label');
label.replaceWith('<input type="text" value="211"/>');
return false;
});
if more then one tr have a tag then you should put id on a or on tr.

Related

Jquery table edit row cancel button is not working properly

I am trying to edit table row but not working properly.
If i click the edit button then remove the textbox value then clicked the edit button showing alert to fill the text box otherwise ucer will click the cancel button previuse value i want to show but cancel button is not working properly.anybody resolve this issue. see JSFiddle for code:http://jsfiddle.net/9KEGd/191/
Js:
$(function () {
$(".edit").click(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var btn = $(this);
var td = btn.closest("tr").find(".editable");
var currentValue = td.text();
//Save current text in td data attribute
$(td).data("current-value", currentValue);
if(btn.text() === "edit")
{
td.html("<input type='text' value="+currentValue+" />");
btn.html("save");
}
else
{
if(td.find("input").val()==""){
alert("please fill the text box")
}else{
td.html(td.find("input").val());
btn.html("edit");
}
}
});
$(".cancel").click(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var td = $(this).closest("tr").find(".editable");
//Read data attribute to get saved text
var currentValue = $(td).data("current-value");
if(currentValue != "")
{
td.html(currentValue);
$(this).parent().find(".edit").html("edit");
//Set attribute to empty string
$(td).data("current-value", "");
}else{
}
});
});
html:
<table id="tabledata">
<thead>
<th>RecID</th>
<th>Col1</th>
<th>opt</th>
</thead>
<tr>
<td><a><div class="nestedtable">Tableshowing no need edit</div></a><span class="editable">RecID1</span></td>
<td>Val1.1</td>
<td>
<ul>
<li> <a class="edit">edit</a></li>
<li> <a class="cancel">cancel</a></li>
</ul>
</td>
</tr>
<tr>
<td><a><div class="nestedtable">Tableshowings no need edit</div></a><span class="editable">RecID2</span></td>
<td>Val2.1</td>
<td> <ul>
<li> <a class="edit">edit</a></li>
<li> <a class="cancel">cancel</a></li>
</ul></td>
</tr>
<tr>
<td><a><div class="nestedtable">Tableshowing no need edit</div></a><span class="editable">RecID3</span></td>
<td>Val3.1</td>
<td> <ul>
<li> <a class="edit">edit</a></li>
<li> <a class="cancel">cancel</a></li>
</ul></td>
</tr>
</table>
I got your question. You need to store the current value on click of edit but you were storing it on click of both edit and save. Here is an updated working fiddle. http://jsfiddle.net/9KEGd/193/
Working code same as fiddle:
$(function () {
$(".edit").click(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var btn = $(this);
var td = btn.closest("tr").find(".editable");
//Save current text in td data attribute
if(btn.text() === "edit")
{
//store the current value only on click of EDIT and not on save
var currentValue = td.text();
$(td).data("current-value", currentValue);
td.html("<input type='text' value="+currentValue+" />");
btn.html("save");
}
else
{
if(td.find("input").val()==""){
alert("please fill the text box")
}else{
td.html(td.find("input").val());
btn.html("edit");
}
}
});
$(".cancel").click(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var td = $(this).closest("tr").find(".editable");
//Read data attribute to get saved text
var currentValue = $(td).data("current-value");
if(currentValue != "")
{
td.html(currentValue);
//Set attribute to empty string
$(td).data("current-value", "");
}else{
}
$(this).parents('tr').find(".edit").html("edit");
});
});
Also I have fixed changing the html to EDIT on click of cancel.

How to reference one <td> from another <td> within the same <tr> in JQuery?

I have an HTML table with the following structure:
<tr>
<td>123</td>
<td ondblclick="makeeditable(this);">this is some text</td>
<td><span ondblclick="makeeditable(this);">this is some more text</span><span>flag</span></td>
</tr>
I am writing a JQuery snippet to make second <td> and the first <span> in the third <td> user-editable with a double-click (for what it's worth, the table is being generated dynamically):
function makeeditable(cell){
var OriginalContent = $(cell).text();
$(cell).html("<input id='editcell' class='input' type='text' value='" + OriginalContent + "' />");
$(cell).children().first().focus();
$(cell).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
}
});
$(cell).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
}
Using the function above, I am successful in making the cells editable. However, now I need to somehow retrieve the row reference number (text inside the first <td>, 123 in this example) of the cell that was just edited. My question is, how can one reference the first <td> of a row from the context of the second <td> of the same row and from that of a <span> within yet another <td> of the same row?
To access the first TD in the row for either the TD or SPAN, use .closest('tr').find('td:first').
Here's a simplified version of your code:
$('.editable ').dblclick(function() {
var $self= $(this),
OriginalContent = $(this).text();
$self.closest('tr').find('td:first').text('Editing');
$self
.html('<input class="input" type="text" value="' + OriginalContent + '"/>')
.find('input') //the following methods now refer to the new input
.focus()
.keypress(function(e) {
if (e.which === 13) {
$self.text($(this).val());
}
})
.blur(function() {
$self.closest('tr').find('td:first').text('Double-click to edit');
$self
.text(OriginalContent)
});
});
td {
border: 1px solid #ddd;
}
.editable {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Double-click to edit</td>
<td class="editable">this is some text</td>
<td><span class="editable">this is some more text</span><span>flag</span>
</td>
</tr>
</table>
var parent = $(cell).parent();
while(parent.get(0).tagName != "TR")
parent = parent.parent();
var referenceLine = parent.children('td')[0];
// here is your reference
console.log(referenceLine.innerText);
Just want to add that Rick Hitchcock's answer is good and well implemented but .parent() and .children() methods are more than 3 times faster than .closest() and .find() methods : check here and run the test.

get selected value from dropdown on save

i am dynamically adding a row(with button and dropdown list) in table and each row is having edit save and delete button. onclick save button cell becomes non editable
function Save(){
var par = $(this).parent().parent(); //tr
var isactive = par.children("td:nth-child(1)");
var id = par.children("td:nth-child(2)");
isactive.html(id.children(':selected').val());
id.html(id.children("input[type=text]").val());
}
when i click on save button the id field becomes non-editable but dropdown is editable so can anyone please tell me the right way to do that.
function Edit(){
var par = $(this).parent().parent(); //tr
var isactive = par.children("td:nth-child(1)");
var id = par.children("td:nth-child(2)");
id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>");
}
and on click edit it takes the value of id to set in textbox but how to do the same with dropdown please help...
Dynamically Insert, Edit, Delete,Save Row in HTML table.
Here i created a Working jsFiddle. Refer the code in jsfiddle.
Html:
<div class="container">
<h2>Table Management</h2>
<div class="table-responsive">
<table border="1" class="table table-striped table-hover table-bordered">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Edit row</td>
<td>save</td>
<td class='deleterow'>delete<div class='glyphicon glyphicon-remove'></div></td>
</tr>
<tr>
<td>A</td>
<td>test1</td>
<td><a href='#' class='editrow'>edit</a></td>
<td><a href='#' class='saverow'>save</a></td>
<td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
</tr>
<tr>
<td>B</td>
<td>test2</td> <td><a href='#' class='editrow'>edit</a></td>
<td><a href='#' class='saverow'>save</a></td>
<td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
</tr>
</table>
</div>
</div>
<hr><button class='btn btn-lg btn-primary addnewrow pull-right'>Add New <span class="glyphicon glyphicon-plus"></span></button>
JS:
$(".deleterow").on("click", function(){
var $killrow = $(this).parent('tr');
$killrow.addClass("danger");
$killrow.fadeOut(2000, function(){
$(this).remove();
});
});
$(document).on('click',".saverow",function(){
var par = $(this).parent().parent(); //tr
var isactive = par.children("td:nth-child(1)");
var id = par.children("td:nth-child(2)");
isactive.html(isactive.children('select').val());
id.html(id.children("input[type=text]").val());
});
$(document).on("click",".editrow", function(){
var par = $(this).parent().parent(); //tr
var isactive = par.children("td:nth-child(1)");
var id = par.children("td:nth-child(2)");
var prevVal = isactive.html();
isactive.html("<select class='seldom'/>");
$('select.seldom')
.append($("<option>A</option>")
.attr("value","A")
.text('A'));
$('select.seldom')
.append($("<option>B</option>")
.attr("value","B")
.text('B'));
$('select.seldom option').each(function(){
if($(this).val() === prevVal){ // EDITED THIS LINE
$(this).attr("selected","selected");
}
});
id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>");
});
function Edit(){
var par = $(this).parent(); //tr
console.log(par);
var isactive = par.children("td:nth-child(1)");
var id = par.children("td:nth-child(2)");
console.log(id)
id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>");
}
$(".addnewrow").on("click", function(){
$('table tr:last').after("<tr><td data-qid='X'>NEW</td><td>NEW</td> <td><a href='#' class='editrow'>edit</a></td><td><a href='#' class='saverow'>save</a></td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>");
});

add class to all the anchor tag which have same file extention

<table>
<tr>
<td>
<span class="file"><a class="" href="#">test1.docx</a></span>
<span class="file"><a class="" href="#">test1.pdf</a></span>
</td>
<td>
<span class="file"><a class="" href="#">test1.docx</a></span>
<span class="file"><a class="" href="#">test1.pdf</a></span>
</td>
</tr>
<tr>
<td>
<span class="file"><a class="" href="#">test2.docx</a></span>
<span class="file"><a class="" href="#">test2.pdf</a></span>
</td>
<td>
<span class="file"><a class="" href="#">test2.docx</a></span>
<span class="file"><a class="" href="#">test2.pdf</a></span>
</td>
</tr>
</table>
<script>
$(document).ready(function(){
var fileName = $('table td span.file a').text();
var ext = fileName.text().split('.').pop();
if(ext == pdf) {
$(this).addClass('pdf');
}
});
</script>
The purpose of the above code is to add class (class='pdf') to anchor tag, which have file extension as 'pdf'. As this code is dynamically generated, I've no access to modify it. So, I decided to write a jQuery code.
I've messed up something with the above code and it is not giving me desired output.
Please help.
You have to iterate, right now this is the document, not each anchor
$(document).ready(function(){
$('table td span.file a').each(function() {
var ext = $(this).text().split('.').pop();
if(ext == 'pdf') {
$(this).addClass('pdf');
}
});
});
FIDDLE
A more sneaky way to do this would be to just return the extension as the class
$('table td span.file a').addClass(function() {
return $(this).text().split('.').pop();
});
That way you're setting pdf, docx etc. classes on the anchors automagically
FIDDLE
An other way:
$(document).ready(function () {
$('table td span.file a').addClass(function () {
return $(this).text().split('.').pop() == "pdf" ? "pdf" : null;
});
});
--DEMO-- Thx #adeneo for jsFiddle base sample
BTW, you could add class regarding any extension: {oops, already posted by adeneo...}
$(document).ready(function () {
$('table td span.file a').addClass(function () {
return $(this).text().split('.').pop();
});
});
--DEMO--
this will help you.
$(document).ready(function(){
$('table td span.file a').each(function() {
var ext = $(this).text().split('.').pop();
if(ext == pdf) {
$(this).addClass('pdf');
}
else if(ext == docx)
{
$(this).addClass('docx');
}
});
});

Clicking an image in a table

Currently when the mouse is dragged over a cell, the code below will highlight permissible cells to drag the selected piece to.
I need to modify the code to include clicking as well. For example, when the mouse is dragged over a cell, permissible cells are highlighted. When the same cell is clicked the permissible cells will remain highlighted until either the original cell is clicked again or until one of the highlighted locations is click where upon the image will appear. How can I do this?
Thanks.
Current fiddle.
HTML:
<table border="1" id="tbl">
<tr>
<td ></td>
<td bgcolor=#000000 ></td>
<td class="items p1 p3"><img src="http://icons.iconarchive.com/icons/deleket/soft- scraps/32/Button-Blank-Red-icon.png"/></td>
</tr>
<tr>
<td bgcolor=#000000 ></td>
<td class="items p1"></td>
<td class="items p3" bgcolor=#000000 ></td>
</tr>
<tr>
<td class="piece" id="p1" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png"></td>
<td bgcolor=#000000 ></td>
<td class="piece" id="p3" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" ></td>
</tr>
</table>
jQuery:
$('img').draggable({ });
$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
if ($(this).css("background-color")==='rgb(255, 255, 0)') {
$(this).children('img').remove();
var cell = ui.draggable.appendTo($(this)).css({
'left': '0',
'top': '0'
});
$('img').draggable('disable');
} else {
ui.draggable.draggable('option','revert',true);
}
$("td").each(function() {
var id = $(this).attr("id");
$("."+id).css("background", "");
});
}
});
$(".piece").mouseover(function() {
id = $(this).attr('id');
$("."+id).css("background", "yellow");
}).mouseleave(function() {
id = $(this).attr('id');
$("."+id).css("background", "");
});
I think this adds the functionality you're looking for:
jsFiddle
JS
var imgs = $('img');
imgs.draggable({ });
$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
var cell = $(this);
var img = ui.draggable;
if (cell.hasClass("yellow")) {
cell.children('img').remove();
img.appendTo(cell).css({
'left': '0',
'top': '0'
});
img.draggable('disable');
} else {
img.draggable('option','revert',true);
}
$('.yellow').removeClass('yellow');
setUpHover();
}
});
imgs.click(function(){
//the image we just clicked on
var img = $(this);
//The cells we can move our image to.
var cells = $("." + img.parent().attr('id'));
//disable dragging of other images while this one is in focus
imgs.not(img).draggable('disable');
//disable the hover event so that we don't lose our highlighted cells
imgs.unbind('hover');
//add a dynamic click event to the cells we're allowed to click on.
cells.click(function(){
//re-enable dragging for all images
imgs.draggable('enable');
//remove the dynamic click event and remove the yellow background
cells.unbind('click').removeClass('yellow');
//add the image to the cell.
$(this).html(img);
//re-bind the hover event.
setUpHover();
});
});
function setUpHover(){
imgs.unbind('hover').hover(function() {
var id = $(this).parent().attr('id');
$("."+id).addClass("yellow");
}, function() {
var id = $(this).parent().attr('id');
$("."+id).removeClass("yellow");
});
}
setUpHover();
CSS
#tbl td { width:32px; height:32px;}
.over { background-color: red; }
.yellow {
background-color:yellow !important;
}

Categories