i am using a table in which i am sending data from a form by using a javascript
the code is
<div class="row">
<div class="span*">
<table id="production" class="table table-bordered" style="margin:10px auto;border:1px solid #999;width:95%">
<thead>
<tr>
<td scope="col" width="200">Product Name</td>
</tr>
<tr>
<td scope="col" width="300">Product Quantity</td>
</tr>
</thead>
</table>
</div>
</div>
</div></div>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="prodname">Product Name:</label>
</td>
<td>
<input id="prodname" name="product name" type="text" />
</td>
</tr>
<tr>
<td>
<label for="prodquantity">Product Quanitity:</label>
</td>
<td>
<input id="prodquantity" name="product quantity" type="text" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add</button>
</form>
And the javascript code is :
function updateForm() {
var prdn = document.getElementById("prodname").value;
var prdq = document.getElementById("prodquantity").value;
var table=document.getElementById("production");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=prdn;
cell2.innerHTML=prdq;
}
How can I retrieve the elements of two columns in two rows instead of columns ?
If I understood your problem right, you want to display the data on 2 rows instead of 2 columns.
<table id="production">
<tr>
<th>Product Name</th>
</tr>
<tr>
<th>Product Quantity</th>
</tr>
</table>
function updateForm() {
var prdn = document.getElementById("prodname").value;
var prdq = document.getElementById("prodquantity").value;
var table=document.getElementById("production");
var rows=table.rows;
var cell1=rows[0].insertCell(-1);
var cell2=rows[1].insertCell(-1);
cell1.innerHTML=prdn;
cell2.innerHTML=prdq;
}
This is provided you can change your HTML structure. What i did was:
structure the table as two rows with the first element in each row as a table header.
get the rows of the table
for each row append a cell at the end
set the content of the cell
Here is a demo:
http://jsfiddle.net/QzcZN/
you should use the selector with id and found the table , get the rows and per every row get the TD , like this example...
http://fiddle.jshell.net/beME9/show/
Related
so I created an dynamic HTML table, in which you can add, deleate or edit columns. I added a functionality that adds all the prices from the "pret" columns and shows it below. I need now, when I add or edit the rows, to automaticly select the "price" column and add the VAT rate (19%) and to show the result in the "pret+TVA" column.
when you press on the add row button, it adds a row below the row and when ever you press the "calculate the total price" it displays the sum of all the prices in the third row.
I added the function below which is supposed to select the specific cell and add to its value the rate and then display the result in the next cell.
function tvaCalc() {
var pretNormal = document.getElementById("table").rows.cells[4];
pretNormal = parseFloat(pretNormal);
var tvaPrice = pretNormal * 1.9;
document.getElementById("table").rows.cells[4].innerHTML = pretNormal;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Oferta de pret</title>
</head>
<body>
<section id="project">
<div class="company-name">
<p>SC DD AUTO GLITIA SRL</p>
<p>GLITIA DANIEL</p>
</div>
<div class="offer ">
<h1>Oferta de pret</h1>
</div>
<div class="container container-tabel">
<table id="table" class="main-tabel">
<tr>
<th>article code</th>
<th>article name</th>
<th>Brand</th>
<th>quantity.</th>
<th>price</th>
<th>price+VAT</th>
</tr>
<tr>
<td>--</td>
<td><b>Labour</b></td>
<td>--</td>
<td>--</td>
<td>35</td>
<td ></td>
</tr>
<tr>
<td>--</td>
<td><b>Total RON</b></td>
<td>--</td>
<td>--</td>
<td id="total">0</td>
<td >--</td>
</tr>
</table>
</div>
</section>
<section id="navigation">
<div class="imputs">
<input type="text" id="cod-articol" class="d-print-none inputField" placeholder="Cod articol" name="article-code" value="" required>
<input type="text" id="nume-articol" class="d-print-none inputField" placeholder="Nume articol" name="article-name" value="" required>
<input type="text" id="marca" class="d-print-none inputField" placeholder="marca" name="brand" value="" required>
<input type="text" id="cant" class="d-print-none inputField" placeholder="Cant." name="Cant." value="" required>
<input type="text" id="pret" class="d-print-none inputField" placeholder="Pret" name="Pret" value="" required>
</div>
<br>
<div class="buttons">
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="addHtmlTableRow()">add row</button>
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="editHtmlTbleSelectedRow();">Edit</button>
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="removeSelectedRow();">delete row</button>
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="calculTotal();">calculate the total price</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script></script>
</body>
</html>
I modified your table structure little bit to make it easy to work with. I've also modified your function a bit to also take care of the totals. You can just call it whenever you're updating the table's content. This worked for me
function tvaCalc() {
let rows = document.querySelector('#table tbody').rows;
let total = 0;
for (let row of rows) {
let price = parseFloat(row.cells[4].textContent);
var vatPrice = price * 1.19;
row.cells[5].textContent = vatPrice;
total += price;
}
document.getElementById('total').textContent = total;
}
tvaCalc()
<table id="table">
<thead>
<tr>
<th>article code</th>
<th>article name</th>
<th>Brand</th>
<th>quantity.</th>
<th>price</th>
<th>price+VAT</th>
</tr>
</thead>
<tbody>
<tr>
<td>--</td>
<td><b>Labour</b></td>
<td>--</td>
<td>--</td>
<td>35</td>
<td ></td>
</tr>
<tr>
<td>--</td>
<td><b>Labour</b></td>
<td>--</td>
<td>--</td>
<td>37</td>
<td ></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>--</td>
<td><b>Total RON</b></td>
<td>--</td>
<td>--</td>
<td id="total">0</td>
<td >--</td>
</tr>
</tfoot>
</table>
I have a problem in JavaScript to repeat a same tr after,when i click the td elements.
My html code bellow:
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates">
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date">
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date">
</td>
</tr>
I tried with this js but failed:
$('.budrow').click(function(){
$(this).find('tr').append('<tr> <td></td> <td></td> <td></td> </tr>');
});
Please help me.
Try to use:
var $table = $('#tabl2');
$table.click(function(e){
var $tr = $(e.target).closest('tr');
if (($tr.parent().prop("tagName") != 'THEAD') && $tr.is(":last-child"))
$tr.after($tr.clone());
});
JSFiddle.
Bind the click event to the clicked element, select the current row using closest() and then append the new row using after() function:
$('.btn').on('click', function() {
var that = $(this);
var newRow = '<tr><td colspan="3">This is a new row</td></tr>';
that.closest('tr').after(newRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
</tr>
</tbody>
</table>
You can clone and add the new row, also it will be better to use a add button separately
<button class="budrow">Add</button>
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates" />
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date" />
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date" />
</td>
</tr>
</table>
then
jQuery(function ($) {
var $tr = $('#tabl2 tbody tr').eq(0);
$('button.budrow').click(function () {
var $clone = $tr.clone();
$('#tabl2').append($clone);
$clone.find('.datepicker').removeClass('hasDatepicker').datepicker();
});
$('.datepicker').datepicker();
});
Demo: Fiddle
$('.budrow tbody input').click(function(e){
makeClone(e);
});
function makeClone(e){
var newClone = $(e.target).closest("tr").clone();
$("#tabl2 tbody").append(newClone);
$(newClone).click(function(ev){
makeClone(ev);
})
}
I am trying to delete selected rows (via checkbox) but I don't understand where I am going wrong
this is my code
JQuery
$("#delete").click(function(){
$("table input[type ='checkbox']:checked").parent().parent().remove();
});
HTML
<div class = "patientData">
<div class ="searchBar">
<input type = "search" name = "search" class = "search">
<i class ="fa fa-search"></i>
<button id = "delete">Delete Selected</button>
</div>
<table style ="width:95%" class = "Info">
<tr>
<th><input type="checkbox" id="select"> </th>
<th> Name</th>
<th>Number</th>
<th>Date</th>
</tr>
</table>
</div>
The user enters the rows which is why my table by default only has headings. I have stuck on this for a while now and no research is helping me solving the problem.
Please help if anyone can, Thanks in advance.
You should use the :has selector to get all rows containing a checked box, rather than working your way back up to the parent. This will keep the selector at the row-level, preventing DOM changes from accidentally working up too many parents and deleting large chunks of the page.
Something like:
$("#delete-button").on("click", function(e) {
$("#delete-table tr:has(td > input[type=checkbox]:checked)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="delete-button">Delete!</button>
<table id="delete-table">
<tr>
<th>
<input type="checkbox" />
</th>
<th>Header</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 2</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 3</td>
</tr>
</table>
Please help if you are seeing this.I want to pre-populate the form-field with row data after clicking on the same row.
SIMILAR TO THIS DEMO:http://jsbin.com/qavugo/2/edit?html,js,output
Problem is faced now. fillForm() function is OK(AS SHOWN IN THE DEMO inside the scripts) in order to populate the form field with row data.HOW DO I GET ROW DATA? But as I am populating the table using jsp like this
<table class="data-table" id="test" border="1">
<tr>
<td>Student ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Year Level</td>
</tr>
<c:foreach items="${allStudents}" var="stud">
<tr>
<td>${stud.studentId}</td>
<td>${stud.firstname}</td>
<td>${stud.lastname}</td>
<td>${stud.yearLevel}</td>
</tr>
</c:foreach>
</table>
Which makes it more difficult for me for getting the rowData than what is showed in the DEMO.
MY FORM
<form name="frm" class="data-form" action="./StudentServlet" method="POST" onsubmit="return validateForm()">
<tr>
<td>
<label>Student ID --></label><input type="text" name="studentId" value="${student.studentId}" />
</td>
<td>
<label>First Name --></label><input type="text" name="firstname" value="${student.firstname}" />
</td>
<td>
<label>Last Name --></label>
<input type="text" name="lastname" value="${student.lastname}" />
</td>
<td>
<label>Year Level --></label><input type="text" name="yearLevel" value="${student.yearLevel}" />
</td>
</tr>
</form>
THE SCRIPTS
$(function() {
// I am not using dummy data here.
var rowData = [
// how and what should go here.Please help
];
row.on("click", function() {
fillForm(rowData);
});
return row;
});
$(".data-table").append(rows);
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
I am updating the records like this
<table>
<tr>
<td colspan="5">
<input type="submit" name="action" value="Add" />
<input type="submit" name="action" value="Edit" />
<input type="submit" name="action" value="Delete" />
<input type="submit" name="action" value=Refresh />
</td>
</tr>
</table>
I am getting an error after clicking the/add/edit/delete button
Warning: StandardWrapperValve[StudentServlet]: Servlet.service() for servlet StudentServlet threw exception
java.lang.NumberFormatException: For input string: " "
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.lang.Integer.parseInt(Integer.java:569)
at java.lang.Integer.parseInt(Integer.java:615)
at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
at com.joseph.controller.StudentServlet.doPost(StudentServlet.java:99)
That demo looks way too complicated for the task at hand. There's really no need to work with class references. You could simplify your approach by doing the following:
HTML:
<h1>Student Info:</h1>
<form class="data-form">
<label>Student ID
<input type="text" />
</label>
<label>First Name
<input type="text" />
</label>
<label>Last Name
<input type="text" />
</label>
<label>Year Level
<input type="text" />
</label>
</form>
<table class="data-table" id="test">
<thead>
<tr>
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Year Level</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Frank</td>
<td>Sinatra</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>Miles</td>
<td>Davis</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Waits</td>
<td>6</td>
</tr>
</table>
JS:
$(document).ready(function () {
$("td", this).on("click", function () {
var tds = $(this).parents("tr").find("td");
$.each(tds, function (i, v) {
$($(".data-form input")[i]).val($(v).text());
});
});
});
The only condition for this to work is that the input order in the form needs to match the column order in the table. Here's a working JSFiddle for reference.
YOUR Form (data-form)tag includes your edit/delete/ update inputs.Keep that out of your form tag.Then the java.lang.NumberFormatException: For input string: " will not take place.See if it works.
I tried adding the code further as mentioned above.It did not worked well.I am facing same dilemma.Anyone plz tell where is it going wrong?
<script>
$(function()
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
}
</script>
Try adding this to the on.cick function
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
I've a following HTML code for table:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
And I've following jQuery code on above table:
$(document).ready(function() {
$('.products').click(function () {
var new_row = $('#reb1').clone();
/*Here I want to use the id as #blacklistgrid_1. As the there may be more than one tables present the ids could be #blacklistgrid_2, #blacklistgrid_3, and so on. So it should be dynamic not static for value 1*/
var tbody = $('tbody', '#blacklistgrid');
/*And in this line too, I want to access the tr and t body of that table with specific id only*/
var n = $('tr', tbody).length + 1;
new_row.attr('id', 'reb' + n);
$(':input', new_row).not('.prod_list').remove();
//new_row.find("td:eq(1)").html();
$('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo( $(new_row.find('td:first')) );
tbody.append(new_row);
$('.delete').on('click', deleteRow);
});
});
I've written my requirement in form of commentin above code. So someone please help me in achieving this. Thank you.
You can do make your code, id starts with blacklistgrid
$('[id^= blacklistgrid_]') // here you can access all elements whose id starts
// with backlistgrid_
and for accessing their specific children
$('[id^= blacklistgrid_]>td')
What others tried to explain in comments,
Here using class selector, you're going to access their id
$.each('.table', function () { // iterate all the table elements
var id = $(this).prop('id');
if (id === "blacklistgrid_1") { // check for the ids
//Perform ToDos
var tds = $(this).find('td');
// using tds perform its ToDos
}
});