Currently I have a dynamic table that takes the values of queries to the database using forms (django)
When the table has been filled with information (there are 7 columns, but 5 of them are not visible despite having values), I would like to know how can I do so that when I select a row from the table or more, the values of the row are 'injected' into two other separate tables.
If only one row is selected from the first table, the values will be injected into two other tables, if two rows are selected from the first table then the values will be injected into 4 tables (2 tables for each selected row).
You can simply loop through checked checkboxes and then using .closest("tr") get reference of closest tr from that checked checkboxes then use .find("td:eq(1/*these values can change */)").text() to get td values and add these values to input boxes and append same to your tables.
Demo Code :
$(function() {
$("input.select-all").click(function() {
var checked = this.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//column checkbox select all or cancel
$("button#show-selected ,button#select-all").click(function() {
show_All();
});
function show_All() {
var html = "";
var html1 = "";
//loop through checked checkboxes
$("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
var selector = $(this).closest("tr") //get closest tr
//generate htmls
html1 += `<tr>
<td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
</tr>`
html += `<tr>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
</tr>`
});
$("#secondTable1").html(html1)
$("#secondTable2").html(html)
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
<div class="row" id="searchVariantTable">
<div class="col">
<table class="table table-hover mt-5">
<thead class="variants-table-thead">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th>Gene</th>
<th>Variant</th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<!--The <tr> are populated dynamically after form submit, I just added some dummy values.
BACKEND: (Python-Django) -->
<tbody class="variants-table-tbody">
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene1</td>
<td class="warning">Variant1</td>
<td style="display: none;"> #1 value1</td>
<td style="display: none;"> #2 value1</td>
<td style="display: none;"> #3 value1</td>
<td style="display: none;"> #4 value1</td>
<td style="display: none;"> #5 value1</td>
</tr>
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene2</td>
<td class="warning">Variant2</td>
<td style="display: none;"> #1 value2</td>
<td style="display: none;"> #2 value2</td>
<td style="display: none;"> #3 value2</td>
<td style="display: none;"> #4 value2</td>
<td style="display: none;"> #5 value2</td>
</tr>
</tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button id="show-selected" class="btn btn-primary">Show selected</button>
</div>
</div>
<div class="row">
<div class="col-6">
<table class="table mt-5">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Gene</th>
<th style="text-align:center;">Variant</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable1">
<!--data will come here -->
</tbody>
</table>
</div>
<div class="col-6">
<div style="text-align: center;">
<h5>Genomic coordinate</h5>
</div>
<table class="table mt-4">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Opt #1</th>
<th style="text-align:center;">Opt #2</th>
<th style="text-align:center;">Opt #3</th>
<th style="text-align:center;">Opt #4</th>
<th style="text-align:center;">Opt #5</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable2">
<!--data will come here -->
</tbody>
</table>
</div>
</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'm new to JS. I have a dynamic table (I didn't add the code for add and delete rows) which I want to show in another table. I try to clone every row. Everything is working but td tag with select element doesn't cloned properly. It shows the selected value or the first value if there is no selected. The idea of this clone is to show the table in modal form and the cloned table will be like a preview. Cloning happened when the modal foem is show. In code below I add the button for cloning table. I think, it doesn't matter in this case.
This is the Fiddle link.
Here is my code HTML:
<table class="table table-bordered" id="table" >
<thead>
<tr>
<td >#</td>
<td >Description</td>
<td >Qty</td>
<td >Units</td>
<td >Price without vat</td>
<td >Vat %</td>
<td >Total</td>
<td >Del</td>
</tr>
</thead>
<tr class="product">
<td class="cloned" width="4%" >
<input type="number" class="enumer" style="width:100%; border: none; padding: 0" disabled="disabled">
</td>
<td class="cloned" width="34%">
<input type="text" class="item_product" style="width:100%;" name="product[]">
</td>
<td class="cloned" width="18">
<input style="width:100%;" class="qty" id="qty" name="qty[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" type="text" value="0" required>
</td>
<td class="cloned" width="7%">
<input id="item_units[]" class="units" style="width:100%;" name="item_units[]" type="text" value="ks">
</td>
<td class="cloned" width="10%">
<input class="price" style="width:100%;" id='price' name="price_unit[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" value="0" type="text" required>
</td>
<td class="cloned" width="7%" id="vat_td">
<select class="vat" id="vat" name="vat[]" type="text">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<input class="hidden" hidden value="1" id="payer_vat_hidden">
<td class="cloned" width="17%">
<input type="number" style="width:100%; background: #dddddd;" class="amount" id="amount" name="amounts[]" readonly>
</td>
<td class="delTD" width="5%">
<button type="button" style="width:100%;" id="deleteRow" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</table>
<button onclick="copyTable()">copy table</button>
<table class="table table-bordered" id="second_table" >
<thead>
<tr>
<th>#</th>
<th>DESCRIPTION</th>
<th class="text-center">QUANTITY</th>
<th class="text-center">UNITS</th>
<th class="text-right">PRICE</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here is my code Javascript:
function copyTable(){
$("#second_table tr").remove();
$("#table tr").each(function() {
var $target = $("#second_table");
var $tds = $(this).children(),
$row = $("<tr></tr>");
$row.append($tds.eq(0).clone())
.append($tds.eq(1).clone())
.append($tds.eq(2).clone())
.append($tds.eq(3).clone())
.append($tds.eq(4).clone())
.append($tds.eq(5).clone())
.append($tds.eq(6).clone())
.appendTo($target);
});
}
I have made the function that helps me dynamically insert the new tr by just clicking one button, but when I reload the div with the help jquery and again hit the add new tr button it not appending.
I try to find the issue and I see the tr#row_{num} count is not resetting and starting from the last count.
for example -
If I appended 3 tr and reload the div and then, again when I click button for new tr adding it starting from 4 and not working/appending.
I used the table empty(); function but it also not working.
Please help me with how I fix this issue -?
$(document).on("click", "button#add_row", function() {
var table = $("#myTable");
var count_table_tbody_tr = $("#myTable tbody tr").length;
var row_id = count_table_tbody_tr + 1;
var html = '<tr id="row_' + row_id + '">';
html += '<td><input type="text" class="form-control ui-form-input firstname" autocomplete="off"></td>' + '<td> <input type="text" class="form-control ui-form-input lastname" autocomplete="off"></td><td></td></tr>';
if (count_table_tbody_tr >= 1) {
$("table#myTable tbody tr:first").before(html);
} else {
$("table#myTable tbody").html(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" id="myTable" style="overflow-y: auto;">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">First Name</th>
<th style="text-align: center; vertical-align: middle;">Last Name</th>
<th style="width: 5%;">
<button type="button" id="add_row" class="btn btn-default">Add ROW</button>
</th>
</tr>
</thead>
<tbody>
<tr id="row_1">
<td>
<input type="text" class="form-control ui-form-input firstname" autocomplete="off">
</td>
<td>
<input type="text" class="form-control ui-form-input lastname" autocomplete="off">
</td>
<td></td>
</tr>
</tbody>
</table>
My JsFddle for live working is here JSFIDDLE
Your code can be simplified to this
Note I moved the ID to to tbody
$(function() {
const $table = $("#myTable");
const $row = $("#row_1");
$("#add_row").on("click", function() {
$table.append(
$row
.clone()
.attr("id",`row_${$table.find("tr").length+1}`)
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" style="overflow-y: auto;">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">First Name</th>
<th style="text-align: center; vertical-align: middle;">Last Name</th>
<th style="width: 5%;">
<button type="button" id="add_row" class="btn btn-default">Add ROW</button>
</th>
</tr>
</thead>
<tbody id="myTable">
<tr id="row_1">
<td>
<input type="text" class="form-control ui-form-input firstname" autocomplete="off">
</td>
<td>
<input type="text" class="form-control ui-form-input lastname" autocomplete="off">
</td>
<td></td>
</tr>
</tbody>
</table>
If the table is dynamic, you need
$(function() {
$(document).on("click","#add_row", function() {
const $table = $("#myTable");
const $row = $("#row_1");
$table.append(
$row
.clone()
.attr("id",`row_${$table.find("tr").length+1}`)
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" style="overflow-y: auto;">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">First Name</th>
<th style="text-align: center; vertical-align: middle;">Last Name</th>
<th style="width: 5%;">
<button type="button" id="add_row" class="btn btn-default">Add ROW</button>
</th>
</tr>
</thead>
<tbody id="myTable">
<tr id="row_1">
<td>
<input type="text" class="form-control ui-form-input firstname" autocomplete="off">
</td>
<td>
<input type="text" class="form-control ui-form-input lastname" autocomplete="off">
</td>
<td></td>
</tr>
</tbody>
</table>
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'm trying to add and remove the text of the cell 2 cells of that row when they are checked.
Let's say they have 4 columns on the table and want to show/hide some row in a different section of the page.
My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.
<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center"><span>A</span></td>
<td class="text-center"><span>B</span></td>
<td class="text-center"><span>C</span></td>
<td class="text-center"><span>D</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A1</span></td>
<td>
<h5>B1</td>
<td>
<h5>C1</h5></td>
<td>
<h5>D1</h5></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A2</span></td>
<td>
<h5><span class="second_col">B2</span></h5></td>
<td>
<h5>C2</h5></td>
<td>
<h5>D2</h5></td>
</tr>
<tr style="">
<td>
<input type="checkbox" class="usercheck">
<span>A3</span></td>
<td>
<h5><span class="second_col">B3</span></h5></td>
<td>
<h5>C3</h5></td>
<td>
<h5>D3</h5></td>
</tr>
</table>
JavaScript that I tried is the below:
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id="removeVal" style="color:red;">X</span>');
});
});
});
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').attr('checked','false');
}
Here is the link to the js fiddle which I tried to work.
I was able to display the content but by giving value to just one column which is not the right way to do I suppose.
https://jsfiddle.net/rahilAhmed/y4fzj66o/
Without re-writing your whole HTML here is how I made it work.
What I did was I added an ID to each span that gets created. That ID is later used to iterate over all checkboxes and find which one needs to be unchecked then un-check it.
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id='+ chain + ' class="removeVal" style="color:red;">X</span>');
});
$(".removeVal").click(checkRemove);
});
});
function checkRemove(e) {
var removeId = e.target.id;
$(".usercheck").each(function(index,checkbox) {
if (checkbox.value == removeId) {
checkbox.checked = false;
}
});
e.target.parentNode.previousSibling.remove();
e.target.remove();
}
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').prop('checked',false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align:center">Selector/Removal</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
Selected Users
<div class="" >
<h4 class="selected_values"></h4>
</div>
</div>
<div class="col-xs-1"><button onclick="clearSelection();">Clear</button></div>
<div class="col-xs-8">
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center" ><span >A</span></td>
<td class="text-center" ><span >B</span></td>
<td class="text-center" ><span >C</span></td>
<td class="text-center" ><span >D</span></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C1</h5></td>
<td><h5>D1</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >A2</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C2</h5></td>
<td><h5>D2</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A3[B3]">
<span class="first_col" value="a3" >A3</span></td>
<td><h5><span class="second_col">B3</span></h5></td>
<td><h5>C3</h5></td>
<td><h5>D3</h5></td>
</tr>
</table>
</div>
</div>
</div>
You can do this : JsFiddle
For unchecked Checkbox, you must do this :
.prop('checked', false);