We Keep Coding

Delete Row, Save Changes once I edit table using Javascript

Someone posted this:
Making row editable when hit row edit button
I wanted to create one delete/edit/save button so that person can enter the order number and delete or edit the data.
Sequencing steps:
On Delete:
I click delete button, the prompt box comes up, I enter 1, it deletes 1.
I click delete button, the prompt box comes up, I enter 2, it does not delete 2.
However:
I click delete button, the prompt box comes up, I enter 2, it deletes 2.
I click delete button, the prompt box comes up, I enter 1, it does not delete 1.
Edit Button works, but when I click on the save button, it won't save the changes
https://jsfiddle.net/nhgjdr00/8/
HTML:
<table id="myTable" border="1">
<thead>
<th>Order #</th>
<th>Name</th>
<th>Tea Order</th>
<th>Tea Size</th>
</thead>
<tbody>
<tr>
<td class="rowNumber">1</td>
<td>Shakespeare</td>
<td>Iced</td>
<td>Small</td>
</tr>
<tr>
<td class="rowNumber">2</td>
<td>Frost</td>
<td>Hot</td>
<td>Medium</td>
</tr>
</tbody>
</table>
<br>
<input id="deleteRowBtn" type="button" value="Delete Row" />
<input id="editBtn" type="button" value="edt" />
<input id="saveBtn" type="button" value="saveChange" />
<br>
<br>
<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" />
<br>
Tea Order:<input type="text" id="txtTeaOrder" name="txtTeaOrder" />
<br>
Tea Size<input type="text" id="txtTeaSize" name="txtTeaSize" />
<br>
</form>
</body>
JS:
"use strict";
var orderNumberHolder=[]; // holds each order number
// returns a html element (id)
var $ = function(id) {
return document.getElementById(id);
};
function deleteRow() {
var orderNumber = parseInt(prompt ("enter order number to delete"));
if (orderNumber == NaN || orderNumber < 1) {
prompt ("enter order number");
} else {
var table = $("myTable");
var rowCount = table.rows.length; // eliminate header so minus 1
for(var i=0, j=0; i<rowCount; i++, j++) {
var row = table.rows[i];
if (orderNumber == i) {
table.deleteRow(i);
rowCount--;
table.rows[j].cells[0].innerHTML = j; // renumbers the list after delete row
}
}
}
}
function edt() {
// converts number into integer
var orderNumber = parseInt(prompt ("enter order number to edit"));
// need to store order number so I can reference when I save edit info
orderNumberHolder.push(orderNumber);
if (orderNumber == NaN || orderNumber < 1) {
prompt ("enter order number");
} else {
var table = $("myTable");
var rowCount = table.rows.length;
// i is index, so start with 1 so it doesn't include header
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
if (orderNumber == i){
$("txtname").value = table.rows[i].cells["1"].innerHTML;
$("txtTeaOrder").value = table.rows[i].cells["2"].innerHTML;
$("txtTeaSize").value = table.rows[i].cells["3"].innerHTML;
}
}
}
}
function saveChange() {
var table = $("myTable");
var rowCount = table.rows.length; // do not want to include header
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
if (orderNumberHolder[i] == i){
table.rows[i].cells["1"].innerHTML = $("txtname").value ;
table.rows[i].cells["2"].innerHTML = $("txtauthor").value;
table.rows[i].cells["3"].innerHTML = $("txtcdate").value;
$("txtname").value = '';
$("txtauthor").value = '';
$("txtcdate").value = '' ;
rowCount--;
}
}
}
window.onload = function() {
$("deleteRowBtn").onclick = deleteRow; // calls function
$("editBtn").onclick = edt; // calls function
$("saveBtn").onclick = saveChange; // calls function
}
I would appreciate any suggestions.

You are taking the row number and deleting that row. When u delete the first row then row number of existing element ie (order# 2) changes to 1 from 2. Hence when you enter 2 in prompt there is no such row to delete.

jQuery .val() returns different values depending on selector path

I am using a large dynamically created table. It is 2+ columns with the first column being text and the second+ being values in text input fields. When the page loads, the input boxes have a default value. I want to be able to save the value when I make changes in the text field.
When I use $("#ID_NAME").val(), I get whatever value the user entered. If I drill down to the input field by other means, .val() gives me the default value when the page loaded. The page doesn't actually use any ids, I just added one for debugging.
I've posted a jsfiddle showing the problem. http://jsfiddle.net/GdjKp/1/
HTML:
<fieldset>
<legend>test</legend>
<table id="menuSection">
<thead>
<tr>
<th>Id</th>
<th>field</th>
</tr>
</thead>
<tbody>
<tr id="row_1">
<td>description</td>
<td>
<input id="test_id" type="text" value="default value"></input>
</td>
</tr>
</tbody>
</table>
</fieldset>Chane text value and click
<input type="button" value="Go" onclick="run();"> the two elements found by jQuery will be in console.log() and the two values will pop up.
JS :
function run() {
var a = $("fieldset");
var b = $(a[0]).find("table > tbody > tr");
var c = $(b[0]).children();
var d = $(c[1].innerHTML);
var result_1 = $(c[1].innerHTML);
var result_2 = $("#test_id");
console.log(result_1);
console.log(result_2);
alert(result_1.val());
alert(result_2.val());
}
What is going on here?
[EDIT]
Here is the final working code
function save() {
var cols = $("fieldset:first > table > thead > tr > th");
var sections = $("fieldset");
var ret = {};
var sectionsTmp = {};
var translation = {};
for (var j=1; j < cols.length-1; j++) { //loop on language columns, skipping field names and delete columns (first and last columns)
var lang = cols[j].innerHTML;
sectionsTmp = {};
for (var i=0; i < sections.length; i++) { //loop on sections/fieldsets
var sectionName = $(sections[i]).children("legend")[0].innerHTML;
var translations = $(sections[i]).find("table > tbody > tr");
translation = {};
for (var k=0; k < translations.length; k++) { //loop on translations in a section
var translationId = translations[k].innerText.trim();
var translationText = $(translations[k]).children().eq(j).find('input').val();
translation[translationId] = translationText.replace(/'/g,'&apos;');
}
sectionsTmp[sectionName] = translation;
}
ret[lang] = sectionsTmp;
}
var url = '<?= $basePath?>/admin/save/item/translations/';
var form = $('<form accept-charset="UTF-8" action="' + url + '" method="post">' +
'<input type="text" name="translations" value=\'' + JSON.stringify(ret) + '\' />' +
'</form>');
$('body').append(form);
console.log(form);
form.submit();
}

You're not actually selecting the element in the case of result_1 - you're cloning it based on its html.
This line:
var result_1 = $(c[1].innerHTML);
is equivalent to this:
var result_1 = $('<input id="test_id" type="text" value="default value"></input>');
As you can see, result 1 has no relation to what's been typed into the input field - it's completely detached from the DOM.

Replace all div tags of each row of a table

I am trying to replace a div tag that is the same on each row of a dynamically created table. I'm not sure how to go about it. Right now I can get the function to work but it only replaces the first row of div tags. Here is my code:
<script type="text/javascript">
function Calc() {
var qty = 0;
qty=parseInt(document.getElementById('qtyEntry').value);
var weight = parseInt(document.getElementById('weight').innerHTML);
var cube = parseInt(document.getElementById('cube').innerHTML);
var carton = parseInt(document.getElementById('carton').innerHTML);
var newWeight = 0;
var newCube = 0;
var newCarton = 0;
newWeight = qty *weight ;
newCube = qty * cube;
newCarton = qty * carton;
document.getElementById('weight').innerHTML = newWeight;
document.getElementById('cube').innerHTML = newCube;
document.getElementById('carton').innerHTML = newCarton;
}
#{int seq=0;
foreach (var item in Model)
{
seq++;
<tr>
<td>#seq</td>
<td>#item.sku</td>
<td>#item.description</td>
<td><input type=text id="qtyEntry" name="buildQty" size="3" onchange="Calc()"/></td>
<td> <div id="carton">#item.cartonQty</div></td>
<td> <div id="weight">#item.weight</div></td>
<td><div id="cube">#item.cube</div></td>
<td></td>
</tr>
}
}
So essentially I want to update the carton, weight and cube quantities when a user changes the text field for buildQty. I want each row to update. Right now only the first row updates even if I am updating the text on another row.

Glaring issue: id's are meant to be unique. Yours are not. So it only accesses the first one. Try this as a change:
markup:
<tr>
<td>#seq</td>
<td>#item.sku</td>
<td>#item.description</td>
<td><input type=text id="qtyEntry#(seq)" name="buildQty#(seq)" size="3" onchange="Calc(#(seq))"/></td>
<td> <div id="carton#(seq)">#item.cartonQty</div></td>
<td> <div id="weight#(seq)">#item.weight</div></td>
<td> <div id="cube#(seq)">#item.cube</div></td>
<td></td>
</tr>
js:
function Calc(seq) {
var qty = 0;
qty=parseInt(document.getElementById('qtyEntry'+seq).value);
var weight = parseInt(document.getElementById('weight'+seq).innerHTML);
var cube = parseInt(document.getElementById('cube'+seq).innerHTML);
var carton = parseInt(document.getElementById('carton'+seq).innerHTML);
var newWeight = 0;
var newCube = 0;
var newCarton = 0;
newWeight = qty *weight ;
newCube = qty * cube;
newCarton = qty * carton;
document.getElementById('weight'+seq).innerHTML = newWeight;
document.getElementById('cube'+seq).innerHTML = newCube;
document.getElementById('carton'+seq).innerHTML = newCarton;
}
But note! This could possibly change your model binding and you will need to revisit the way you are going to accept this from your post. I would assume it is not properly posting as it is right now because the name is also not unique (and that is part which has to do with model binding).

Make jquery increment a text box number and id

I want to be able to click the button and have it copy this:
<tr id="1">
<td>
<input type="number" class="cue">
</td>
<td>
<input type="time">
</td>
<td>
<input type="text">
</td>
</tr>
And be able to change the id of the <tr> based on what is before it. I also want it to change the value of the number box based on the variable cueset.
When you press the button to add a row it calls add_row()
function add_row(rowCount)
{
for(i=0; i<rowCount; i++)
{
index = index + 1;
$('table').append( $('#1').prop('id', index));
}
}
What im not sure how to do is have it change the id, or the value of the number box.

I don't understand the use of rowCount and the for loop from your explanation, so here it is without them
function add_row()
{
var mostRecentTr = [].pop.call($("tr"));
var newNum = 1+$(mostRecentTr).attr("id");
var newTr = $(mostRecentTr).clone().attr("id", newNum);
newTr.find(".cue").val(newNum);
$("table").append(newTr);
}

var lastRow = jQuery('tr[id]').last();
var currCount = parseInt(lastRow.id);
var newRow = lastRow.clone()
newRow.id = currCount++;
lastRow.parent().append(newRow);
Though I'd suggest something a bit better like this:
var lastRow = jQuery('tr[counter]').last();
var currCount = parseInt(lastRow.attr('counter'));
var newRow = lastRow.clone()
newRow.attr('counter', currCount + 1).id = ('myRow' + currCount + 1);
lastRow.parent().append(newRow);

Dynamic Section in Form

I am creating a form and I have a field set for client information and the ability to add another field set for another client if needed.
As of now the additional field sets' field id adds by 1 which is good, but I would like for each of the fields in the field set to add by 1 as well.
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("client1").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placehere").appendChild(oClone);

Here's a page that clones and increments the fieldset as well as any children elements within the set. It's assuming that both fieldset and children inputs have a numeric suffix. i.e. fieldset1 and textfield2, etc.
Cheers.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
// store a reference to the last clone so I can increment off that.
window.lastClone = null;
function incrementId(id) {
// regexp is looking for text with a number suffix. adjust accordingly.
var numberSuffixRegExp = /(.*?)(\d*)$/;
var regExpMatch = numberSuffixRegExp.exec(id);
// assuming a match will be made here, and position 1 and 2 are populated.
var prefix = regExpMatch[1];
var counter = parseInt(regExpMatch[2]);
counter++;
return prefix + counter;
}
function cloneFieldSet() {
if (!window.lastClone) {
window.lastClone = 'fieldset1';
}
var newFieldSet = document.getElementById(lastClone).cloneNode(true);
newFieldSet.id = incrementId(newFieldSet.id);
var tagNames = ['input', 'select', 'textarea']; // insert other tag names here
var elements = [];
for (var i in tagNames) {
// find all fields for each tag name.
var fields = newFieldSet.getElementsByTagName(tagNames[i]);
for(var k = 0; k < fields.length; k++){
elements.push(fields[k]);
}
}
for (var j in elements) {
// increment the id for each child element
elements[j].id = incrementId(elements[j].id);
}
document.getElementById("placehere").appendChild(newFieldSet);
window.lastClone = newFieldSet.id;
}
</script>
</head>
<body>
<input type='button' value='Clone' onclick='cloneFieldSet()'/><br/>
<fieldset id='fieldset1'>
<table>
<tr>
<td>Label One:</td>
<td><input type='text' id='fieldOne1'/></td>
</tr>
<tr>
<td>Label Two:</td>
<td><input type='text' id='fieldTwo1'/></td>
</tr>
<tr>
<td>Label Three:</td>
<td><select id='selectOne1'>
<option>Some Value</option>
</select></td>
</tr>
</table>
</fieldset>
<div id='placehere' style='margin:10px 0; border:1px solid black'>
</div>
</body>
</html>

Try This : It only adds an updated id to user input form elements.
If you want to updated all child elements in the fieldset, remove the if statement :)
var _counter = 0, _fcounter = 0;
function add(){
var i, j,
oClone = document.getElementById("client1").cloneNode(true),
fldTypes = "INPUT SELECT TEXTAREA CHECKBOX RADIO",
fields = oClone.children;
_counter++;
oClone.id += (_counter + "");
for(i=0, j= fields.length; i<j; i++){
if(fldTypes.indexOf(fields[i].nodeName) > -1){ //checks for user input form elements
_fcounter ++;
fields[i].id += (_fcounter + "");
}
}
document.getElementById("placehere").appendChild(oClone);
return oClone;
}
See Example: http://jsfiddle.net/yfn6u/8/