get value in td with rowspan - javascript

I have a table with rowspan as a starting column. The table has a button at the end of each row. When the button is clicked, the corresponding rows values should be retrieved.
$('.get-value').on("click",function(){
var col1val = $(this).parents('table').find('.col1').text();
var col2val = $(this).parents('tr').find('.col2').text();
var col3val = $(this).parents('tr').find('.col3').text();
var col4val = $(this).parents('tr').find('.col4').text();
alert("Col1 :" + col1val + " Col2 :" + col2val + " Col3 :"+ col3val + " Col4 :" + col4val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="col1"> 1 </td>
<td class="col2"> 2 </td>
<td rowspan="2" class="col3"> 4 </td>
<td class="col4"> 5 </td>
<td rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="col2"> 3 </td>
<td class="col3"> 6 </td>
<tr>
<td class="col2"> 10 </td>
<td rowspan="3" class="col3"> 13 </td>
<td class="col4"> 14 </td>
<tr>
<td class="col2"> 11 </td>
<td class="col3"> 15 </td>
</tr>
<tr>
<td class="col2"> 12 </td>
<td class="col3"> 16 </td>
<td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
</tr>
</table>
when alert 1 or alert 2 clicked , not all value be retrieved
alert 1 i want result 1,2,3,4,5,6
alert 2 i want result 1,10,11,12,13,14,15,16
learn from here , but not same
help


There are several problems in your code. First you need rows, but you are computing columns. Then you get only parent tr when you should get table.
Here it is, I refactored it for you. Fell free to ask if you don't understand something.
function parseAndRemoveDuplicates(arr) {
arr = arr.split(" ").filter(e=>e)
arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
return arr;
}
$('.get-value').on("click",function(){
var row1val = $(this).parents('table').find('.row1').text();
var row2val = $(this).parents('table').find('.row2').text();
var row3val = $(this).parents('table').find('.row3').text();
var row4val = $(this).parents('table').find('.row4').text();
var row5val = $(this).parents('table').find('.row5').text();
var rowsValues = "Row1 :" + row1val + " Row2 :" + row2val + " Row3 :"+ row3val + " Row4 :" + row4val + " Row5 :" + row4val;
var alert1 = parseAndRemoveDuplicates(row1val + row2val);
var alert2 = parseAndRemoveDuplicates(row3val + row4val + row5val);
console.log(alert1);
console.log(alert2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
<td class="row1"> 2 </td>
<td rowspan="2" class="row1 row2"> 4 </td>
<td class="row1"> 5 </td>
<td rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="row2"> 3 </td>
<td class="row2"> 6 </td>
<tr>
<td class="row3"> 10 </td>
<td rowspan="3" class="row3 row4 row5"> 13 </td>
<td class="row3"> 14 </td>
<tr>
<td class="row4"> 11 </td>
<td class="row4"> 15 </td>
</tr>
<tr>
<td class="row5"> 12 </td>
<td class="row5"> 16 </td>
<td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
</tr>
</table>
here is a better version:
function parseAndRemoveDuplicates(arr) {
arr = arr.split(" ").filter(e=>e)
arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
return arr;
}
function getValuesFromRows(obj, rowclasses) {
var table = $(obj).parents('table');
return parseAndRemoveDuplicates(table.find(rowclasses).text());
}
$('.get-value').on("click",function(){
var alert1 = getValuesFromRows(this, '.row1,.row2');
var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');
console.log(alert1);
console.log(alert2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
<td class="row1"> 2 </td>
<td rowspan="2" class="row1 row2"> 4 </td>
<td class="row1"> 5 </td>
<td rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="row2"> 3 </td>
<td class="row2"> 6 </td>
<tr>
<td class="row3"> 10 </td>
<td rowspan="3" class="row3 row4 row5"> 13 </td>
<td class="row3"> 14 </td>
<tr>
<td class="row4"> 11 </td>
<td class="row4"> 15 </td>
</tr>
<tr>
<td class="row5"> 12 </td>
<td class="row5"> 16 </td>
<td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
</tr>
</table>


The following code, amends the first answer of Nelson Teixeira by having each alert provide the numerical values in a sorted order. Also, when you click each alert, now the code provides only the data corresponding to the specific alert, as follows:
function parseAndRemoveDuplicates(arr) {
arr = arr.split(" ").filter(e => e)
arr = arr.filter((v, i) => arr.indexOf(v) == i).sort().join(" ");
return arr;
}
function getValuesFromRows(obj, rowclasses) {
var table = $(obj).parents('table');
return parseAndRemoveDuplicates(table.find(rowclasses).text());
}
$('#but1').on("click", function() {
var alert1 = getValuesFromRows(this, '.row1,.row2');
console.log(alert1);
});
$('#but2').on("click", function() {
var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');
console.log(alert2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center">
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
<td class="row1"> 2 </td>
<td rowspan="2" class="row1 row2"> 4 </td>
<td class="row1"> 5 </td>
<td rowspan="2"> <button id='but1' class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="row2"> 3 </td>
<td class="row2"> 6 </td>
<tr>
<td class="row3"> 10 </td>
<td rowspan="3" class="row3 row4 row5"> 13 </td>
<td class="row3"> 14 </td>
<tr>
<td class="row4"> 11 </td>
<td class="row4"> 15 </td>
</tr>
<tr>
<td class="row5"> 12 </td>
<td class="row5"> 16 </td>
<td rowspan="2"> <button id='but2' class="get-value"> Alert 2 </button> </td>
</tr>
</table>
In order to sort the numerical values, the code slightly tweaks parseAndRemoveDuplicates() by sorting the array values before joining them into a string result.
Admittedly, the solution for having each alert provide distinct data, involves less than elegant code, adding a unique id to each button element and then creating a similar function for each to display the corresponding result.

Related

drag from one <table> to another using javascript without any plugins [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have two tables: Passengers and Flights.
<table>
<tr>
<th>
Passenger Name
</th>
<th>
Passenger Flight
</th>
</tr>
<tr>
<td>
Passenger 1
</td>
<td>
FR5412
</td>
</tr>
<tr>
.....
<tr>
</table>
<table>
<tr>
<th>
Flight Number
</th>
<th>
Current capacity
</th>
<th>
Max capacity
</th>
</tr>
<tr>
<td>
FR45321
</td>
<td>
23
</td>
<td>
198
</td>
</tr>
<tr>
.....
<tr>
</table>
I need to drag passenger from table Passengers to Flight and at this moment change Flight Number of passenger in Passengers to FlightNumber in Flights on which I drop it and increase Capacity in Flight, to which we drag Passenger.
Many thanks.

Here you go
let item = null;
function startDragging(e) {
item = e.target;
e.dataTransfer.setData("text/plain", "");
}
function dragOverHandler(e) {
e.preventDefault();
}
function dropHandler(e) {
if(parseInt(e.target.parentElement.children[1].outerText) < parseInt(e.target.parentElement.children[2].outerText)) {
const customer = item.querySelector("td:last-child");
if(customer.outerText != e.target.parentElement.children[0].outerText) {
customer.textContent = e.target.parentElement.children[0].outerText;
e.target.parentElement.children[1].textContent = parseInt(e.target.parentElement.children[1].outerText) + 1;
}
} else {
window.alert("This flight is full!");
}
}
<table>
<tr>
<th>
Passenger Name
</th>
<th>
Passenger Flight
</th>
</tr>
<tr draggable="true" id="c1" ondragstart="startDragging(event)">
<td>
Passenger 1
</td>
<td>
FR5412
</td>
</tr>
<tr draggable="true" id="c2" ondragstart="startDragging(event)">
<td>
Passenger 2
</td>
<td>
FR5412
</td>
</tr>
<tr draggable="true" id="c3" ondragstart="startDragging(event)">
<td>
Passenger 3
</td>
<td>
FR5412
</td>
</tr>
<tr draggable="true" id="c4" ondragstart="startDragging(event)">
<td>
Passenger 4
</td>
<td>
FR5412
</td>
</tr>
</table>
<table>
<tr>
<th>
Flight Number
</th>
<th>
Current capacity
</th>
<th>
Max capacity
</th>
</tr>
<tr class="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event)">
<td>
FR45321
</td>
<td>
23
</td>
<td>
198
</td>
</tr>
<tr class="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event)">
<td>
FR45322
</td>
<td>
23
</td>
<td>
198
</td>
</tr>
<tr class="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event)">
<td>
FR45323
</td>
<td>
23
</td>
<td>
198
</td>
</tr>
<tr class="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event)">
<td>
FR45324
</td>
<td>
203
</td>
<td>
198
</td>
</tr>
</table>

Filtering data in columns from options use jQuery

I work with filtering, and i have issues, i have 4 option input in which i have some data which i need to filter in table, for now i filter data only for one column, but problem is if i will add one more filter, script will not work, and filter data from the last selected value. But i need if i have 2-4 selected values in option data is filtering.
My code:
JS:
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr").hide();
filters.forEach(filter => {
$("#orderListData td" + filter).parent().show();
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/
So if in options number 3 u will chosse 023 and tap add filters it's will work, but if i chosse 023 and options number 4 BOOKED it's will filter only booked status, where is problem?

By doing $("#orderListData td" + filter).parent().show() on every filter, you are essentially showing every row that matches EVEN ONE of the filters. While you have to show only those rows which can satisfy ALL filters.
So instead of looping through filters and checking if any td element satisfies it, loop through the rows and check if it satisfies every filter.
Use this code to do so ( Only the filterData function is changed )
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr");
rows.hide();
//Check if any row satisfy all filters
$.each(rows, (i, row) => {
if (filters.every(filter => $(row).find(filter).length)) {
$(row).show();
}
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.row::after {
display: table;
clear: both;
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>
<div class=" col-2">
<select class="form-control secondary-select" id="materialCode">
<option></option>
<option>16014344C</option>
<option>16016398A</option>
<option>16009838A</option>
</select>
<p><strong>Material Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="plantCode">
<option></option>
<option>0119</option>
<option>0379</option>
</select>
<p><strong>Plant Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="vsCode">
<option></option>
<option>023</option>
<option>0379</option>
</select>
<p><strong>Value Stream Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="statusCode">
<option></option>
<option>BOOKED</option>
<option>RELEASED</option>
</select>
<p><strong>Status</strong></p>
</div>
<div class="col-1">
<button id="filterButton" class="button button-clear butt-heith">
Apply filters
</button>
</div>
</div>
<button id="cancelFilters" class="button button-deactivate float-right">
Cancel filters
</button>
<table class="table-editor" id="ordersList">
<thead>
<tr>
<th>Production order code</th>
<th>Material code</th>
<th>Target quantity</th>
<th>Plant code</th>
<th>Value stream code</th>
<th>Status</th>
<th>Release date</th>
<th>Activation date</th>
<th>Booking date</th>
<th>TPT (d)</th>
</tr>
</thead>
<tbody id="orderListData">
<tr>
<td>
14298947
</td>
<td class="column1">
11027174A
</td>
<td>
1
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 06:57:42
</td>
<td></td>
<td>
2020-03-02 08:12:22
</td>
<td>
0.1 </td>
</tr>
<tr>
<td>
80150671
</td>
<td class="column1">
11019682A
</td>
<td>
800
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:02:32
</td>
<td></td>
<td>
2020-03-02 15:30:51
</td>
<td>
0.3 </td>
</tr>
<tr>
<td>
80150672
</td>
<td class="column1">
15000987A
</td>
<td>
503
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:28:04
</td>
<td></td>
<td>
2020-03-13 00:00:00
</td>
<td>
10.6 </td>
</tr>
<tr>
<td>
80150673
</td>
<td class="column1">
11011572E
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:32
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150674
</td>
<td class="column1">
18300753C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:57
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150675
</td>
<td class="column1">
11014966C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:31:26
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150676
</td>
<td class="column1">
11014264D
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:33:48
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150677
</td>
<td class="column1">
18300753C
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:34:16
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150678
</td>
<td class="column1">
11020109B
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:34:38
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150679
</td>
<td class="column1">
15001454B
</td>
<td>
100
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:37:59
</td>
<td></td>
<td>
2020-03-12 00:00:00
</td>
<td>
9.6 </td>
</tr>
</tbody>
</table>

Jquery - simple multiplication assignment mistake

https://jsfiddle.net/ohrgw29y/#&togetherjs=4USeqx1oCx
I'm trying to make a column "price together" each cell in which would display two other cells of a row multiplied. I got it to "add assign" but cannot "multiply assign.
$(document).ready(function() {
$('tr').each(function() {
var price_row_total=0
$(this).find('.subjects').each(function() {
var price_attributes=$(this).text();
if(price_attributes.lenght!==0) {
price_row_total+=parseFloat(price_attributes);
}
});
$(this).find('#price_row_total').html(price_row_total);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
<thead>
<tr>
<th scope="col">Supply</th>
<th scope="col">Used by</th>
<th scope="col">Periodicity</th>
<th scope="col">Amount</th>
<th scope="col">Units</th>
<th scope="col">Price per unit</th>
<th scope="col">Price together</th>
</tr>
</thead>
<tbody>
<tr>
<td>water</td>
<td>
<span>plant1</span>
</td>
<td>
<h4><b> monthly </b></h4>
</td>
<td class="subjects">
10
</td>
<td> <h4> liters </h4> </td>
<td class="subjects">
2.99
</td>
<td id="price_row_total"></td>
</tr>
<tr>
<td>hay</td>
<td>
<span>animal1</span>
</td>
<td>
<h4><b> one time </b></h4>
</td>
<td class="subjects">
15
</td>
<td> <h4> stacks </h4> </td>
<td class="subjects">
1.50
</td>
<td id="price_row_total"></td>
</tr>
</tbody>
</table>
P.S. I'm not even a beginner in JS , I have no idea what I'm doing, sorry. I'm sure it's simplest thing ever but I'm too short on time to learn JS synthax right now. Trying to finish this volunteered project for an animal sanctuary. Hope this explains why someone posts such simple things.

By no means is this answer elegant or even best practice, but it addresses you're current issue.
$(document).ready(function() {
$('tr').each(function() {
// this was modified to get price and unit based off class name (changed from subjects)
const unit = Number($(this).find('.units').text());
const price = Number($(this).find('.price').text());
// the toFixed(2) rounds to 2 decimal places as these are floating point numbers you will end up with something like 29.90000002
const price_row_total = (unit * price).toFixed(2);
$(this).find('.total').html(price_row_total);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
<thead>
<tr>
<th scope="col">Supply</th>
<th scope="col">Used by</th>
<th scope="col">Periodicity</th>
<th scope="col">Amount</th>
<th scope="col">Units</th>
<th scope="col">Price per unit</th>
<th scope="col">Price together</th>
</tr>
</thead>
<tbody>
<tr>
<td>water</td>
<td>
<span>plant1</span>
</td>
<td>
<h4><b> monthly </b></h4>
</td>
<td class="units">
10
</td>
<td> <h4> liters </h4> </td>
<td class="price">
2.99
</td>
<td class="total"></td>
</tr>
<tr>
<td>hay</td>
<td>
<span>animal1</span>
</td>
<td>
<h4><b> one time </b></h4>
</td>
<td class="units">
15
</td>
<td> <h4> stacks </h4> </td>
<td class="price">
1.50
</td>
<td class="total"></td>
</tr>
</tbody>
</table>

How to show table rows between two days?

I have a table. I want to show only table rows which match between two days
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>
I want to show rows between date 20-6-2019 to 22-6-2019.
20-6-2019 |Payment | Ajay | By cash|
21-6-2019 |Payment | Ajay |By cash |
22-6-2019 |Payment | Ajay |Tran |

As your data is getting from server , you should hidden table first by css . Then get data and send to javascript function as param I test with displayInterval as below
function displayInterval(from, to) {
$("#Table tbody tr td:first-child").each(function() {
var curDate = setJsDate($(this).html());
var froms =setJsDate(from);
var tos = setJsDate(to);
if(curDate >= froms && curDate <= tos) {
} else {
$(this).parent().hide();
}
});
$("#Table tbody").show();
}
function setJsDate(d) {
if(typeof d == "number" || typeof d == "undefined") return;
var pattern = d.split('-');
var dt = new Date(pattern[2]+"-"+pattern[1] + "-"+pattern[0]);
return dt.getTime();
}
displayInterval('20-06-2019','22-06-2019');
#Table tbody {
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td>20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>

<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
</tbody>
</table>

How do I put randomly generated numbers into a table?

I need to put 6 randomly generated numbers in a an HTML table, I was wondering what would be the best solution, this is my JS code :
function GenerateNumber(){
var sResultat = "";
var iCompteur;
for(iCompteur=0;iCompteur<=6;iCompteur++)
{
sResultat = Math.round(Math.random()* 18) + 1;
}
}
Would calling them with the AddEventListener work? I need to make it appear everytime I load the page, and of course, the numbers need to be different if I reload the page.
Here is my HTML code : (I put numbers temporarily to test my code and to show where I want them to appear)
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>

function generateNumber() {
var sResultat
var cells = ["FOR", "DEX", "CON", "INT", "SAG", "CHA"]
cells.forEach(function(cell) {
sResultat = Math.round(Math.random() * 18) + 1;
document.getElementsByClassName(cell)[0].innerText = sResultat
})
}
generateNumber()
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class="FOR">
</td>
<td class="DEX">
</td>
<td class="CON">
</td>
<td class="INT">
</td>
<td class="SAG">
</td>
<td class="CHA">
</td>
</tr>
</table>
</div>

function GenerateNumber(){
var tds = document.querySelectorAll('.table td');
return Array.prototype.forEach.call(tds, function(td){
td.innerHTML = Math.round(Math.random()*18) + 1;
});
}
window.onload = GenerateNumber;
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>

Categories

Resources