I created a Shopping List table with two sections(Grocery Name and Price) in my browser and I have a field for the user to input the name of the grocery. I want, every time when the user enters an item in the field and presses the "ADD" button or enter, for the item to be placed into the table section.
var groceries = []
document.querySelector('#addGroceryForm').addEventListener('submit', addGrocery)
function addGrocery(event) {
event.preventDefault() //stop the form submission(re-loading the page)
var groceryInput = document.querySelector('#groceryInput')
groceries.push(groceryInput.value)
//Add the new column to the table;
groceryInput.value = ''
updateGroceries()
}
function updateGroceries() {
var groceriesElement = document.querySelector('#groceries')
groceriesElement.innerHTML = ''
for (var currentIndex = 0; currentIndex < groceries.length; currentIndex++) {
var grocery = groceries[currentIndex]
groceriesElement.innerHTML += '<li>' + grocery + '</li>'
}
}
<form id="addGroceryForm" method='post'>
<input id='groceryInput' type='text' placeholder="Enter Food">
<button type='submit'>ADD</button>
</form>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-left">Price</th>
</tr>
</thead>
<tbody class=groceries>
<tr>
<td></td>
<td class="groceryInput"></td>
</tr>
<tr>
<td class="text-left" id='leftOne'> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
</tbody>
</table>
Related
I have data in source table and i want to copy and append row to destination table on button click of specific row. There is an h1 where I want to display column total of price column of destination table. Also I need button on destination table from which I can remove the selected row from that table.
<table id="source_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Product 1</td>
<td >$10</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>2</td>
<td >Product 2</td>
<td >$20</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>3</td>
<td >Product 3</td>
<td >$30</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> Total Price <h1> <!-- I want to show price column(dest_table) total here -> </h1> </div>
Consider the following example.
$(function() {
function calcTotal(t) {
var rows = $("tbody tr", t);
var total = 0.00;
var val;
rows.each(function(i, r) {
val = $("td:eq(2)", r).text().substr(1);
total += parseFloat(val);
});
$(".total").html("$" + total);
}
$(".copy-row").click(function(e) {
var src = $(this).closest("tr");
var dst = $("#dest_table tbody");
src.clone().appendTo(dst);
$("#dest_table tbody tr:last td:eq(3) button").toggleClass("copy-row del-row").html("X");
calcTotal($("#dest_table"));
});
$("#dest_table tbody").on("click", ".del-row", function(e) {
if (confirm("Are you sure you want to remove this row?")) {
$(this).closest("tr").remove();
}
calcTotal($("#dest_table"));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$10</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$20</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Product 3</td>
<td>$30</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="total"> Total Price
<h1></h1>
</div>
This makes use of a lot of elements, yet at it's core, it does clone the row, and appends the clone to the destination.
Do you want something like this:
$(document).ready(function(){
$(".copy-row").click(function(){
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
var col4=currentRow.find("td:eq(3)").text(); // get current row 4th TD
var markup = "<tr><td>" + col1 + "</td><td>" + col2 + "</td><td>" + col3 + "</td><td>" + col4 + "</td></tr>";
$("#dest_table tbody").append(markup);
// sum of price
var sum = 0;
$('#dest_table tbody tr').each(function() {
var price = $(this).find('td:eq(2)').text();
price = price.replace('$', '');
sum += parseInt(price);
});
$('#total').text('$' + sum);
});
});
But I highly recommend you use some framework like React, Vue or Svelte. Your life will be easier.
This question already has answers here:
Convert form data to JavaScript object with jQuery
(58 answers)
Closed 5 years ago.
I have a 7 steps form and this is the last step which shows all the info the user typed in former pages. All the data is dynamically appended to each <td class="table_info_ans"> using jQuery.
I need to wrap up these data into json format like below and send it to backend:
{
"personal": {
"gender": "F",
"firstName": "Heeeeey",
"lastName": "Beauty",
"localName": "Girl",
"birthday": "1992/10/28"
},
"interests": {
"destinations": [
"UK",
"USA",
"CA"
],
}
}
Any method to do this??
The table structure looks like:
<form action='/student-registration/process'>
<hr>
<div class="blue_font_title">ABOUT YOU
<div class="link_page link_page_1" data-hook="form_step1"><span class="page_back_arrow">🡨</span></div>
</div>
<table class="info_table" id="personal">
<tbody>
<tr>
<td class="table_info_title">Gender:</td>
<td class="table_info_ans student_gender" name="gender"></td>
</tr>
<tr>
<td class="table_info_title">Local name:</td>
<td class="table_info_ans student_local_name" name="localName"></td>
</tr>
<tr>
<td class="table_info_title">First name:</td>
<td class="table_info_ans student_eng_firstname" name="firstName"></td>
</tr>
<tr>
<td class="table_info_title">Last name:</td>
<td class="table_info_ans student_eng_lastname" name="lastName"></td>
</tr>
<tr>
<td class="table_info_title">Birthday:</td>
<td class="table_info_ans student_birthday" name="birthday"></td>
</tr>
</tbody>
</table>
<hr>
<div class="blue_font_title">COUNTRY AND TIME YOU WANT TO GO
<div class="link_page link_page_2" data-hook="form_step2"><span class="page_back_arrow">🡨</span></div>
</div>
<table class="info_table" id="interest">
<tbody>
<tr>
<td class="table_info_title">Destination:</td>
<td class="table_info_ans student_study_destination"></td>
</tr>
...
</tbody>
</table>
<button type="submit" id="submit_button" class="submit_button">SUBMIT YOUR PROFILE</button>
Now, I'm trying to wrap up these data into the format I want manually....
var personal_title_arr = [];
var personal_ans_arr = [];
var obj_per = {};
$('#personal tr').each(function() {
var personal_title = $(this).find('.table_info_ans').attr('name');
var personal_ans = $(this).find('.table_info_ans').text();
personal_title_arr.push(personal_title);
personal_ans_arr.push(personal_ans);
});
for (var i = 0; i < personal_title_arr.length; i++) {
obj_per[personal_title_arr[i]] = personal_ans_arr[i];
}
var asJSON_per = JSON.stringify(obj_per);
Because there are four tables in this form, so I have to wrap them up manually four times. I think the way I'm doing is really ridiculous..... Are there any tips that I can for loop just ONE time?
Following will work in javascript. Try this:
Change the table as :
<table class="info_table" id="personal" data-id="personal">
<tbody>
<tr>
<td class="table_info_title">Gender:</td>
<td class="table_info_ans student_gender" name="gender">F</td>
</tr>
<tr>
<td class="table_info_title">Local name:</td>
<td class="table_info_ans student_local_name" name="localName">Heeey</td>
</tr>
<tr>
<td class="table_info_title">First name:</td>
<td class="table_info_ans student_eng_firstname" name="firstName">Beauty</td>
</tr>
<tr>
<td class="table_info_title">Last name:</td>
<td class="table_info_ans student_eng_lastname" name="lastName">Girl</td>
</tr>
<tr>
<td class="table_info_title">Birthday:</td>
<td class="table_info_ans student_birthday" name="birthday">1992/10/28</td>
</tr>
</tbody>
</table>
<table class="info_table" id="interests" data-id="interests">
<tbody>
<tr>
<td class="table_info_title">Destination:</td>
<td class="table_info_ans student_gender" name="Destination" data-multi="true">US<br/>UK<br/>Canada</td>
</tr>
<tr>
<td class="table_info_title">Year:</td>
<td class="table_info_ans student_local_name" name="Year">2020</td>
</tr>
<tr>
<td class="table_info_title">Month:</td>
<td class="table_info_ans student_eng_firstname" name="Month">AUgust</td>
</tr>
<tr>
<td class="table_info_title">Level of educaiton :</td>
<td class="table_info_ans student_eng_lastname" name="Level of educaiton" data-multi="true">Certificate<br/>Diploma<br/>masters</td>
</tr>
</tbody>
</table>
Then use,
<script>
var tables = $(".info_table");
var finalObj = {};
for(var i=0;i<tables.length;i++){
var tempObj = {};
$(tables[i]).find("tr").each(function(){
var key = $(this).find(".table_info_ans").attr("name");
if($(this).find(".table_info_ans").attr("data-multi")=="true"){
tempObj[key] = $(this).find(".table_info_ans").html().split("<br>");
}else{
tempObj[key] = $(this).find(".table_info_ans").html();
}
});
var objId = $(tables[i]).attr("data-id");
finalObj[objId] = tempObj;
}
</script>
the variable finalObj will have the data in the format you wanted.
I dynamically generated a table rows with html input controls using jquery.
The problem is that when there is a postback they disappear.
How do I make them stay?
Html:
#Html.HiddenFor(x => x.Attribute_Count)
<table id="attribute" class="list">
<thead>
<tr>
<td class="left">Name</td>
<td class="right">Sort Order</td>
<td></td>
</tr>
</thead>
<tbody id="attribute-row">
<tr>
<td class="left">
#Html.TextBoxFor(x => x.AttributeName)
<div class="validation-area">
#Html.ValidationMessageFor(x => x.AttributeName)
</div>
</td>
<td class="right">#Html.TextBoxFor(x => x.Attribute_SortOrder)</td>
<td class="left"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td class="left"><a onclick="addattribute();" class="button">+</a></td>
</tr>
</tfoot>
</table>
JQuery:
var attribute_row = 1; function addattribute(){html = '<tbody id="attribute-row' + attribute_row + '">';html += ' <tr>';html += ' <td class="left">#Html.TextBoxFor(x=>x.AttributeName)<div class="validation-area">#Html.ValidationMessageFor(x => x.AttributeName)</div></td>';html += ' <td class="right"><input type="text" name="Attribute_SortOrder" id="Attribute_SortOrder"></td>';html += ' <td class="left"><a onclick="$(\'#attribute-row' + attribute_row + '\').remove();" class="button">-</a></td>';html += ' </tr>';html += '</tbody>';$('#attribute tfoot').before(html);attribute_row++;$('#Attribute_Count').val(attribute_row);}
I solved the problem.
#for (var i = 0; i < Model.Attribute_Count; ++i)
{
<tbody id="attribute-row">
<tr>
<td class="left">
#Html.TextBoxFor(x => x.AttributeName[i])
<div class="validation-area">
#Html.ValidationMessageFor(x => x.AttributeName[i])
</div>
</td>
<td class="right">#Html.TextBoxFor(x => x.Attribute_SortOrder[i])</td>
<td class="left"><a onclick="$('#attribute-row' + i).remove();" class="button">-</a></td>
</tr>
</tbody>
}
Thanks
I have just create a large table with more than 30 rows of data, witch can be filtered by on of its column - the Name column.
The thing that the filter do is - it is putting style="display: none;" into the TR tag.
My question is - how to create a Grand Total row that sum only the non "display: none" rows?
Here is a sample of my table:
<table class="sortable TF" id="table1" border="1">
<thead>
<tr class="fltrow">
<td>
<input class="flt" ct="0" id="flt0_table1" type="text">
</td>
<td>
<input class="flt" ct="1" id="flt1_table1" type="text">
</td>
<td>
<input class="flt" ct="2" id="flt2_table1" type="text">
</td>
<td>
<input class="flt" ct="3" id="flt3_table1" type="text">
</td>
</tr>
<tr>
<th class="head_row">Person</th>
<th class="head_row">Monthly pay</th>
<th class="head_row">Monthly pay1</th>
<th class="head_row">Monthly pay2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Steve Nicol</td>
<td>8,500</td>
<td>51,000</td>
<td>1,000</td>
</tr>
<tr>
<td>Steve McMahon</td>
<td>9,200</td>
<td>3,000</td>
<td>2,000</td>
</tr>
<tr style="display: none;">
<td>Jan Molby</td>
<td>12,000</td>
<td>4,000</td>
<td>11,000</td>
</tr>
<tr style="display: none;">
<td>John Barnes</td>
<td>15,300</td>
<td>200</td>
<td>12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Grand TOTAL</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</tfoot>
</table>
var sum = [0, 0, 0];
$('table.sortable tbody tr:visible').each(function() {
sum[0] += parseInt($('td:eq(1)', this).text().replace(',', ''), 10);
sum[1] += parseInt($('td:eq(2)', this).text().replace(',', ''), 10);
sum[2] += parseInt($('td:eq(3)', this).text().replace(',', ''), 10);
});
$('table.sortable tfoot tr td:gt(0)').each(function(i) {
var text = sum[i].toString();
if (text.length > 3) { // checking length for 3 to insert comma
text = text.replace(/(\S{3}$)/, ",$1");
}
$(this).text(text);
});
DEMO
But if you remove comma then change is:
$('table.sortable tfoot tr td:gt(0)').each(function(i) {
$(this).text(sum[i]);
});
DEMO
I have an html table with cells that span multiple rows:
<table border="1" style=""><tbody id="x">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row2">
<td>BBBB</td>
<td> </td>
</tr>
<tr>
<td>CCCC</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</tbody></table>
<script type="text/javascript">
alert ("index of dd before delete =" + document.getElementById("dd").cellIndex);
document.getElementById("row2").style.display="none";
alert ("index of dd after delete =" + document.getElementById("dd").cellIndex);
</script>
I am trying to manipulate it in Javascript, eg hide row2.
When I do that, the multi-row cell containing "**" moves down, shifting all the cells in row 3 by 1 to the right. Evidently I have to reduce its rowSpan.
But it seems when I am looking at row 1, I have no way of knowing that there is a multi-row cell intersecting this row - it seems I have to scan all the rows above row2 for multi-row cells.
Is there a better/quicker way to find out what multi-row cells affect the hiding (or deleting) operation?
Try this using javascript... It is working properly.
Change the value of currRowToDelete for Range [1 to 6].
Refer for working code: http://jsfiddle.net/arunkumrsingh/cdS2D/1/
<table id="tbl" border="1" runat="server" >
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row3">
<td>BBBB</td>
<td> </td>
</tr>
<tr id="row4">
<td>CCCC</td>
<td> </td>
</tr>
<tr id="row5">
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr id="row6">
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var trs = document.getElementById("tbl").getElementsByTagName("tr");
var tds;
var bDeleted = false;
var currRowToDelete = 3;
for(var i=0;i<currRowToDelete;i++)
{
tds = trs[i].getElementsByTagName('td');
for(var j=0;j<tds.length;j++)
{
var currRowSpan = tds[j].rowSpan;
if(currRowSpan > 1)
{
if(eval(i + 1) == currRowToDelete)
{
var cell = document.createElement("td");
cell.innerHTML = tds[j].innerHTML;
trs[i + 1].insertBefore(cell, trs[i + 1].getElementsByTagName('td')[0]);
document.getElementById("tbl").deleteRow(i);
bDeleted = true;
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
else
{
if(eval(currRowSpan + i) >= currRowToDelete)
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
}
}
}
if(bDeleted == false)
document.getElementById("tbl").deleteRow(currRowToDelete -1);
</script>
I have a solution, in which you don't have to calculate the Rowspan and Colspan.
Step 1: Get the content of HTML (As mentioned above) and save as EXCEL file.
Step 2: Delete the particular Row (ie Row 2).
Step 3: Save as HTML file and Read the HTML content.
You will get the HTML in correct format.