I have a table with a table head and and empty body:
<table id ="floodTable" class ="gradient-style">
<thead>
<tr>
<th>Event Name</th>
<th>Date</th>
<th style="text-align:right">Return Period</th>
</tr>
</thead>
<tbody>
...//add stuff here...
</tbody>
</table>
I have an API that brings in a JSON object. If one of the sub-objects meets a certain criteria, I want to use the attribute values to populate the new row with values for
"Event Name" (document.getElementById("floodTable").rows[0].cells[1]),
"Date" (document.getElementById("floodTable").rows[0].cells[2]), and
"Return Period" (document.getElementById("floodTable").rows[0].cells[3])
Using that my API may pull back multiple items that meet my criteria, I will probably have to create several rows. How can I use insertRow(0) and/or insertCell(0) to do this?
You can use HTMLTableElement.insertRow() and HTMLTableRowElement.insertCell() methods to achieve this:
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
event.stopPropagation();
const values = Object.values(form.elements).filter(el => el.id).map(el => el.value);
if (values.length === 3) {
const table = document.querySelector('#floodTable tbody');
const row = table.insertRow(0);
values.forEach((val, ind) => {
row.insertCell(ind).innerHTML = val;
});
form.reset();
window.location.href = '#floodTable';
}
}, false);
html {
scroll-behavior: smooth;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="container">
<table id="floodTable" class="table gradient-style">
<thead>
<tr>
<th>Event Name</th>
<th>Date</th>
<th style="text-align:right">Return Period</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="card">
<form class="card-body">
<div class="form-group">
<label for="event">Event name:</label>
<input type="text" class="form-control" id="event" required>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="date" required>
</div>
<div class="form-group">
<label for="period">Return period:</label>
<input type="text" class="form-control" id="period" required>
</div>
<button type="submit" class="btn btn-primary">Add a row</button>
</form>
</div>
</div>
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 am building the system where there is a table with the anchor tag name original and copy in each row. Clicking on these anchor tag we can update into the database whether the item is original or copy using ajax. But i cannot hide the full row after one of the anchor tag is clicked.
I am using Laravel-8 to Develop at backend.
My view
<div class='container' style="margin-top:50px">
<div class="row">
<div class="input-group" style="margin:20px">
<form >
<table style="float:right">
<th>
<div class="form-outline">
<input type="search" id="form1" class="form-control" placeholder="Search" /></th>
<th><button type="button" class="btn btn-success" >
<i class="fas fa-search"></i>
</button></th>
</form>
</div>
<div class="table-responsive">
<table class="table custom-table">
<thead>
<tr>
<th scope="col">
<label class="control control--checkbox">
<input type="checkbox" class="js-check-all"/>
<div class="control__indicator"></div>
</label>
</th>
<th scope="col" >S.N</th>
<th scope="col">LC NO</th>
<th scope="col">Applicant</th>
<th scope="col">Doc Value</th>
<th scope="col">Doc Received date</th>
<th scope="col">LC Type</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $number = 1;?>
#foreach($datas as $items)
<tr>
<th scope="row" style="padding:20px">
<label class="control control--checkbox">
<input type="checkbox"/>
<div class="control__indicator"></div>
</label>
</th>
<td>{{$number}}</td>
<td>{{$items->lc_no}}</td>
<td>{{$items->applicant}}</td>
<td>{{$items->doc_value}}</td>
<td>{{$items->rec_date}}</td>
<td>{{$items->sight_usance}}</td>
<td>Original</td>
<td>Copy</td>
</tr>
<?php $number++; ?>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Here is my jquery ajax function
$(".original").on('click', function(){
var id=$(this).attr('data-id');
$.ajax
({
type: "GET",
url: "orgupdate/"+id,
success: function(response)
{
alert(response);
}
});
});
Within the event handler this is the element the event occurred on. From that element use closest() to get a reference for the row.
$(".original").on('click', function() {
// reference closest row
var $row = $(this).closest('tr')
var id = $(this).attr('data-id');
$.ajax({
type: "GET",
url: "orgupdate/" + id,
success: function(response) {
alert(response);
// after verify response value remove the row
$row.remove()
}
});
});
I have list of parameters along with checkboxs where i can search and select required parameters in table.Now i want to set values for selected parameters.For this i have created textfields(Parameters name,Datatype,Set Value) in table format.When i select check box in parameters table,textfields in table should be created with selected parameters . when i deselect checkbox textfields should removed. For instance if i select one parameter "TestingDevice" from parameters table,Textfields should be created value with "TestingDevice" and other DataType and Set value should be manually entered by user. Below the code i am using.
List Of Parameters
<div class="tab-content">
<div id="Device_B" class="tab-pane fade in active">
<div class="col-md-12">
<div class="col-md-6" style="overflow: auto">
<br>
<input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search 🔍 :">
<br>
<h4>All Parameters</h4>
<div class="span5 border-0" style="overflow: auto">
<table id="customGroupAddParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
<th>Parameter Name</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #all_br_parameters.each do |parameter| %>
<tr id="tr_rb_<%=parameter['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
</td>
<td style="word-break:break-all;">
<%= parameter['parameter_name']%>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
Table For Textfield
<div class="tab-content" >
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
Try this out: It's how I'd handle it.
$(document).ready(function() {
window.addEventListener('load', (event) => {
checkbox = document.getElementById("checkbox_to_be_evaluated");
textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
evaluateCheckbox(checkbox, textbox);
});
$(checkbox).click(function(){
evaluateCheckbox(checkbox, textbox)
});
function evaluateCheckbox(checkbox, textbox) {
//take in element of checkbox
if(checkbox.checked){
textbox.style.display = "block";
}else {
textbox.style.display = "none";
}
//handle accordingly
};
});
I have list of packages. All of them are radio buttons. When clicked, i get list of price options who are also radio button, but only first price option, others are normal buttons.
When i click on package radio button, i need first price option also checked and active, so it can show some values inside of it. Others needs to be closed.
<div class="col-md-12 packageList">
<h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26"
type="radio" value="26" name="radio"> Paket 1</h4>
<h4 class="col-sm-3">Credits:<span> 20</span></h4>
<h4 class="col-sm-3">Duration: <span>2min</span></h4>
<h4 class="col-sm-2"><span>$200</span>/Month</h4>
</div>
<br>
<div class="package" id="package26">
<label>Price Option: </label>86
<label class="hideRadio">
<input class="price_option" type="radio"
value="86"
name="price_option" checked="checked">
</label>
<br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_86">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th>
Vrednost 31<br>
<input type="hidden"
name="value-86[]"
value="Vrednost 31">
</th>
</tbody>
<tbody>
<th>
Vrednost 32<br>
<input type="hidden"
name="value-86[]"
value="Vrednost 32">
</th>
</tbody>
</table>
</div>
</div>
</div>
<label class="hideRadio">
<button class="price_option" type="button"
name="price_option" value="91">
Alternative Payment
</button>
</label>
<br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_91">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th>
assd<br>
<input type="hidden"
name="value-91[]"
value="assd">
</th>
</tbody>
<tbody>
<th>
asdasd<br>
<input type="hidden"
name="value-91[]"
value="asdasd">
</th>
</tbody>
</table>
</div>
</div>
</div>
</div>
This is my script for now:
/*Radio buttons */
$('div[id^="package"]').hide();
$('body').on('click', 'input[id^="id_radio"]', function () {
$('div[id^="package"]').hide();
$('#package' + $(this).val()).show();
console.log($(this).val());
});
$('div[id^="price_option_div"]').hide();
$('body').on('click', '.price_option', function () {
$('div[id^="price_option_div_"]').hide();
$("#price_option_div_" + $(this).val()).show();
console.log($(this).val());
});
I assume that u cant change your HTML Code and add some Classes. Therefore you could use something like this:
/* Radio buttons */
// set variables
var $packages = $('div[id^="package"]'),
$priceOptions = $('div[id^="price_option_div"]'),
priceOptionNr;
// hide stuff
$packages.hide();
$priceOptions.hide();
$('input[id^="id_radio"]').on('click', function () {
// hide stuff
$packages.hide();
$priceOptions.hide();
// safe price option value
priceOptionNr = $('#package' + $(this).val())
.find('.price_option').val();
// show specific price option + connected div
$('#package' + $(this).val()).show()
.find('#price_option_div_' + priceOptionNr).show();
});
$('.price_option').on('click', function () {
$priceOptions.hide();
$("#price_option_div_" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 packageList">
<h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26" type="radio" value="26" name="radio"> Paket 1</h4>
<h4 class="col-sm-3">Credits:<span> 20</span></h4>
<h4 class="col-sm-3">Duration: <span>2min</span></h4>
<h4 class="col-sm-2"><span>$200</span>/Month</h4>
</div> <br>
<div class="package" id="package26">
<label>Price Option: </label>86
<label class="hideRadio"> <input class="price_option" type="radio" value="86" name="price_option" checked="checked"> </label> <br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_86">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header"> <th>Values</th> </tr>
</thead>
<tbody>
<th> Vrednost 31<br> <input type="hidden" name="value-86[]" value="Vrednost 31"></th>
</tbody>
<tbody>
<th> Vrednost 32<br> <input type="hidden" name="value-86[]" value="Vrednost 32"></th>
</tbody>
</table>
</div>
</div>
</div>
<label class="hideRadio"> <button class="price_option" type="button" name="price_option" value="91"> Alternative Payment</button> </label> <br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_91">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th> assd<br> <input type="hidden" name="value-91[]" value="assd"></th>
</tbody>
<tbody>
<th> asdasd<br> <input type="hidden" name="value-91[]" value="asdasd"></th>
</tbody>
</table>
</div>
</div>
</div>
</div>
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/