We Keep Coding

How to edit table td value using jquery

I want to edit td values and I did it partialy but it's not working properly. Please help me.Here is my jsfiddle snippet:https://jsfiddle.net/rKF8a/34/
Note:No need contenteditable="true" option because IE will not support.
HTML:
<table id="elencoMezzi" width="100%">
<thead>
<tr><th>Field 1</th></tr>
</thead>
<tbody>
<tr>
<td><span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
<tr>
<td><span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td>
</tr>
</tbody>
</table>
Js:
$(function(){
$("#elencoMezzi tr").click(function() {
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('span:eq(1)').find('button').click(function() {
$(this).text("Saved");
setTimeout(function(){
$(this).parent('span').css('display','none');
}, 500);
});
});
});

Use contenteditable="true" to edit the content.The contenteditable attribute specifies whether the content of an element is editable or not.
$(function () {
$("#elencoMezzi tr").click(function() {
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('span:eq(1)').find('button').click(function() {
$(this).text("Saved");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
<th>
Field 1
</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">
<span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td contenteditable="true">
<span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
</tbody>
Next option is replace td with input on click and reverse it to span on button click. Here is an example. Note: yo need to update as per your logic.
$(function () {
$("#elencoMezzi tr").each(function() {
edittd();
$(this).find('td').find('span:eq(1)').css('display','block');
$(this).find('td').find('.closed').find('button').on('click',function() {
var value = $(this).parent().prev('input').val();
$(this).parent().prev('input').replaceWith('<span class="value">' + value+ '</span>');
$(this).text("Saved");
edittd();
});
function edittd(){
$("td").find('.value').on('click', function(){
var value = $(this).text();
$(this).replaceWith('<input type="text" value="'+value+'">');
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
<th>
Field 1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="value">Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
<tr>
<td>
<span class="value">Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
</td>
</tr>
</tbody>

Edit option?
<TD> is not normally used for an editable field. It's a cell in a table for data being output. You can add the attribute contenteditable which works on anyone who got the latest version of their browser in like the last 5 years so that a large part of internet users but by no means all.
<TD contenteditable="true">
Perhaps you need an <input> field.
If that's not what you mean I don't understand your question. Consider re-writing it.

index class in different rows in jquery

I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.
Here's my code
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
</tbody>
</table>
so i want to be able to click on class="button"
$(".button").click(function(){
(".claim_value").val() of this same row goes into (".vet_value").val()
});

Just call parent() to access the parent <tr> element and modify <td> from there
$(".button").click(function(){
var $parent=$(this).parent();
var claimValue=$parent.find(".claim_value").text();
$parent.find(".vet_value").text(claimValue);
});

you don't need to use .val() unless the element is input or textarea
with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want
$(".button").click(function(){
var claim_value = $(this).closest('tr').find(".claim_value").text();
$(this).closest('tr').find(".vet_value").text(claim_value);
});

Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.
$(".button").click(function(){
alert($(this).closest('tr').find(".claim_value").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
</tbody>
</table>

How to colspan tr table from the start of the table

i want to start the colspan from the second column i mean from the name:
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
</tbody>
please can anyone tell me how i can colspan from the name??

It seems all you need is to add a <td> to the row. You have :
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
Change it to:
<tr ng-if="device.expanded" ng-repeat-end="">
<td style="width: 30px;"></td>
<td colspan="5">gfhgfjhfjtjrtkjy</td>
</tr>
This should add a <td> beneath the plus/minus icon. Additionally, you can style this <td> if you do not intent it to be appear as a column ( which I think is your intent).
Hope that helps.

<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td colspan="2" align="center"><p>{{device.name}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>

Display next element which is not a sibling

I have the following HTML code. I want the class 'moreDetails' to be shown only when the user clicks the 'View More' button
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td></tr>
<tr class = moreDetails>
<td>
Additional details
</td>
</tr>
<tr>
Here is my java script. I have tried all versions of next(), .parent(), prev() etc. I couldnt get it working. Can you please help?
function moreDetails(obj){
$(obj).closest('.currentRow').find('moreDetails').show();
}

Change find('moreDetails') to find('.moreDetails') .
$(obj).closest('.currentRow').find('.moreDetails').show();
OR
$(obj).parent().next().show();
OR
$(obj).parent().next('.moreDetails').show();
EDIT :
If the html is this
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td>
</tr>
<tr class = moreDetails>
<td> Additional details</td>
</tr>
Then use
$(this).closest('tr').next().show();

<tr class = moreDetails> is missing the quotes around the class name. It should be <tr class="moreDetails">
When the page loads, as per your requirement, you need to hide the <tr class="moreDetails" element. So, use style="display:none" to hide the div in initial state.
One of the solutions using Javascript only
function moreDetails(){
var moreDetailElement = document.querySelector(".moreDetails");
moreDetailElement.style.display = "inline";
}
<table>
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td><button type="button" class="btn btn-default" onclick="moreDetails()">View More</button></td></tr>
<tr class="moreDetails" style="display:none">
<td>
Additional details
</td>
</tr>
</table>

$('button').closest('.currentRow').next('.moreDetails').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td>
<button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button>
</td>
</tr>
<tr class='moreDetails'>
<td>
Additional details
</td>
</tr>
<tr>
</table>
Use .closest() with .next().
Use .closest('.currentRow') or .closest('tr') to get the parent tr.
Use .next('.moreDetails') to get the tr you want to show

Can't remove <tr> added via jQuery 'append' [duplicate]

This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
Here is the JSFiddle http://jsfiddle.net/swordf1zh/BcHuS/13/ and the sample code is below:
HTML
<h1>Invoice</h1>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<td><strong>Product</strong></td>
<td class="text-center">
<strong>Price</strong>
</td>
<td></td>
</tr>
</thead>
<tbody id="tabla-detalle">
<tr class="detalle">
<td>Samsung Galaxy S5</td>
<td class="text-center item-reg">900</td>
<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td>
</tr>
<tr class="detalle">
<td>Samsung Galaxy S5 Extra Battery</td>
<td class="text-center item-reg">250</td>
<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td>
</tr>
<tr class="detalle">
<td>Screen protector</td>
<td class="text-center item-reg">300</td>
<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<h1>Available products</h1>
<table class="table" id="search-items-table">
<thead>
<tr>
<th>Product</th>
<th class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr class="list-item">
<td class="list-item-name">iPhoneX</td>
<td class="text-center list-item-reg">1000</td>
</tr>
<tr class="list-item">
<td class="list-item-name">Tablet</td>
<td class="text-center list-item-reg">350</td>
</tr>
<tr class="list-item">
<td class="list-item-name">Item x</td>
<td class="text-center list-item-reg">300</td>
</tr>
<tr class="list-item">
<td class="list-item-name">Item y</td>
<td class="text-center list-item-reg">450</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" id="btn-add-items">Add selected products to invoice</button>
JS
// Delete items from invoice when click on button x
$('.borrar-item').click(function() {
$(this).closest('tr.detalle').remove();
});
// Select items from 'available products' list
$('.list-item').click(function(){
$(this).toggleClass('success select2add');
});
// Add selected items from 'available products' to 'INVOICE'
$('#btn-add-items').click(function() {
$('.select2add').each(function() {
var name = $(this).children('td.list-item-name').text();
var price = $(this).children('td.list-item-reg').text();
$('#tabla-detalle').append('<tr class="detalle"><td>' +name+'</td><td class="text-center item-reg">'+price+'<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td></tr>');
});
});
Below in the JSFiddle is a list items that can be added to the invoice on top, but in newly added items the 'x' button to remove the line is not working (the initial items in the invoice CAN be removed when pressing on the 'x' button to the right).
This is my first project using jQuery and Javascript and I have been researching for the last 3 hours trying to solve this issue without positive results, so I would like to see a little explanation of why my code is not working.
Thanks in advance for your help!

Because events are not magically added to new elements. Use event delegation.
$("#tabla-detalle").on("click", '.borrar-item', function() {
$(this).closest('tr.detalle').remove();
});