We Keep Coding

How can I get all the rows of my table and display it in an alert message?

Hello everyone I was wondering how i could retrieve all rows of my table. I would like to have an alert message popping up showing the rows and all the data within it.
here is my table code
<table id="adminTable" class="table table-bordered table-responsive-sm table-hover">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<thead>
<tr>
<th>Emailaddress</th>
<th>Name</th>
<th>Admin</th>
<th>BHV'er</th>
</tr>
</thead>
<tbody id="myTable">
<tr class="table">
<td class="table">email</td>
<td class="table">name</td>
<td class="table">
<form>
<select id="isAdmin">
<option selected>false</option>
<option value="false">false</option>
<option value="true">true</option>
</select>
</form>
</td>
<td class="table">bhv</td>
</tr>
</tbody>
</table>
<button type="button" onclick="onSubmit()" class="btn btnprimary">Submit</button>
This is what I have gotten so far
function onSubmit() {
var table = document.getElementById('adminTable');
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++)
{
alert( i + " row : " + rows[i].innerHTML);
}
}
This is the output in the alert box which for some reason is an entire piece of code

Maybe the following is of some help to you:
onSubmit=()=>alert([...document.querySelectorAll("#adminTable tbody tr")]
.map(tr=>[...tr.children].map(td=>{
let s=td.querySelector('select');
return s && s.value || td.textContent })
.join(',')).join('\n'))
<input class="form-control" id="myInput" type="text" placeholder="Search.."><br>
<table id="adminTable" class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Emailaddress</th>
<th>Name</th>
<th>Admin</th>
<th>BHV'er</th>
</tr>
</thead>
<tbody id="myTable">
<tr class="table">
<td class="table">email</td>
<td class="table">name</td>
<td class="table">
<form>
<select id="isAdmin">
<option selected>false</option>
<option value="false">false</option>
<option value="true">true</option>
</select>
</form>
</td>
<td class="table">bhv</td>
</tr>
</tbody>
</table>
<button type="button" onclick="onSubmit()" class="btn btnprimary">Submit</button>
I moved your input element to a position where it will result in valid HTML.
Feel free to change the column (,) in line separators (\n) in the line .join(',')).join('\n')) to something you like.

How can I link a select with my tablehead?

I want to know how can I link my tableheads with a select ?
Here is a screen of how it looks
I just want to add a town in a column I've chosen before.
Here is my code :
function addRow() {
var table = document.getElementById("table");
var row= table.insertRow(-1);
var column1 = row.insertCell(0);
column1.innerHTML += document.getElementById("ville").value;
}
<h2>Test</h2>
<form method="post" action="">
<select id="select">
<option selected disabled>Choose one</option>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
<option>Option E</option>
</select>
<input type="text" name="ville" id="ville" />
<input type="button" onclick="addRow();" value="Save"/>
</form>
<table id="table" style="margin: 30px; border-spacing: 20px;">
<thead>
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>

You need to have the select list provide you with the column number the new text needs to go in. Something like:
function addRow() {
var table = document.getElementById("table");
var row = table.insertRow(-1);
var columnpicked = document.getElementById("select").value;
for (let i = 0; i <= columnpicked; i++) {
row.insertCell(0);
}
row.cells[columnpicked].innerHTML += document.getElementById("ville").value;
}
<h2>Test</h2>
<select id="select">
<option selected disabled>Choose one</option>
<option value=0>Option A</option>
<option value=1>Option B</option>
<option value=2>Option C</option>
<option value=3>Option D</option>
<option value=4>Option E</option>
</select>
<input type="text" name="ville" id="ville" />
<input type="button" onclick="addRow();" value="Save"/>
<table id="table" style="margin: 30px; border-spacing: 20px;">
<thead>
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Option E</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
Note that you only had four columns in your example - so, I've added an Option E column to match the select list items.

I will leave the other answer there in case we need to go back to it. From your comments, I think you need to do something like:
function addRow() {
// Get the tbody element - NOTE: an id has been added to that to make it easier to find
var table = document.getElementById("tablerows");
// Get the rows in the tbody element
var rows = table.getElementsByTagName("tr");
// If there are no rows, create one
if (rows.length == 0) {
tbody.insertRow();
}
// Get the first row
var row = rows[0];
// Get the column selected by the user
var selected = document.getElementById("select").value;
// Check if the row has enough td items to put the text into the selected column
if (row.cells.length - 1 < selected) {
// If it hasn't, create them
for (let i = 0; i < selected; i++) {
let td = document.createElement("td");
row.appendChild(td);
}
}
// Get the text to be inserted
var ville = document.getElementById("ville");
// Insert the text in the selected column
row.cells[selected].innerHTML = ville.value;
}
<h2>Test</h2>
<select id="select">
<option selected disabled>Choose one</option>
<option value=0>Option A</option>
<option value=1>Option B</option>
<option value=2>Option C</option>
<option value=3>Option D</option>
<option value=4>Option E</option>
</select>
<input type="text" name="ville" id="ville" />
<input type="button" onclick="addRow();" value="Save"/>
<table id="table" style="margin: 30px; border-spacing: 20px;">
<thead>
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Option E</th>
</tr>
</thead>
<tbody id="tablerows">
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
I have added an id to the tbody tag as the header row is seen as part of the table's rows collection. Doing this means that we can target only the rows on the tbody.
OK - assuming we are ok for the users to enter text directly in a cell, try:
function addRow() {
var t = document.getElementById("datarows");
var rtemplate = document.getElementById("newrow");
var r = rtemplate.content.cloneNode(true);
t.appendChild(r);
}
table {border-collapse:collapse;}
td {height:23px; background-color:white; border:1px solid black; padding:5px; width:100px; vertical-align:top;}
th {border:1px solid black; padding:5px; width:100px;}
td:focus {background-color:lightgreen;}
<b>Click on a table cell to add/edit text</b><br>or click to add a new row <button id="newrowbutton" onclick="addRow();">Add new row</button>
<hr>
<table>
<thead id="headerrow">
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Option E</th>
</tr>
</thead>
<tbody id="datarows">
<tr>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</tbody>
</table>
<template id="newrow">
<tr>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</template>

show/hide select options when td class is multiple

When I choose an option in a select, some columns are displayed, some are hidden. Some columns have several class.
For example:
"object 7" is in "category 1" and "category 3".
"object 7" is displayed in "category 3" but not in "category 1".
I would like to display it also in category 1.
function categories() {
var sections = document.getElementById("sections").value;
if (sections == "cat1") {
$('.cat1').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat1').each(function() {
this.style.display = "none"
});
}
if (sections == "cat2") {
$('.cat2').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat2').each(function() {
this.style.display = "none"
});
}
if (sections == "cat3") {
$('.cat3').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat3').each(function() {
this.style.display = "none"
});
}
if (sections == "tous") {
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "table-cell"
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
<option value="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>
Could you tell me what's wrong in my code ?

You can simpify your code in this following approach:
var sections = document.getElementById("sections").value;
$('table tr td').each(function(){
$(this).css('display', $(this).hasClass(sections) ? 'block' : 'none');
});
You have to change the display property based on condition.
$(this).hasClass(sections)
hasClass method determines whether any of the matched elements are
assigned the given class.
function categories() {
var sections = document.getElementById("sections").value;
$('table tr td, table tr th').each(function(){
$(this).css('display', $(this).hasClass(sections) ? 'inline-block' : 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
<option value="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>

First it will be better to attach the change event using jQuery.
$('#sections').on('change', function(){
//Your event core here
});
And remove the inline onclick from you select :
<select class="form-control" id="sections" name="sections">
You can hide all the td and th after every change then show the elements by classname like :
$('.'+class_name).show();
Hope this will help you.
$('#sections').on('change', function(){
var class_name = $(this).val();
$('td,th').hide();
$('.'+class_name).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections">
<option value="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>

I just made a little change to your script. Hide all first and then show each class..
function categories() {
var sections = document.getElementById("sections").value;
// hide all first and then show
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "none";
});
if (sections == "cat1") {
$('.cat1').each(function() {
this.style.display = "table-cell";
});
}
if (sections == "cat2") {
$('.cat2').each(function() {
this.style.display = "table-cell";
});
}
if (sections == "cat3") {
$('.cat3').each(function() {
this.style.display = "table-cell";
});
}
if (sections == "tous") {
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "table-cell";
});
}
}

Add table row on dropdown select & delete row. Only once add the row from particular dropdown select

My requirement is as follows:
I have table with default row with dropdown in 1st column, Once i select an option from dropdown, 1 table row should be added, with same content as main row & should add delete button for that added row. Delete button should not visible for 1st row once 1 row is added then only delete button visible for 1st row. Pls help me on this.
Thanks in advance.
My code as follows
<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%">
<thead>
<tr>
<th width="5%">Sr.no</th>
<th width="20%">Items</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Unit</th>
<th>Amount</th>
<th>Tax</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="additems" name="additems" class="form-control" required="required">
<option selected>-- Select --</option>
<option>Add new</option>
<option value="1"> Abc </option>
<option value="2"> IT services </option>
<option value="3"> JS Enterprises</option>
</select>
</td>
<td>Dell 500 series</td>
<td>55,333</td>
<td>10</td>
<td>NA</td>
<td>5,53,330</td>
<td>8%</td>
<td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td>
</tr>
</tbody>
</table>

Here you go with the solution https://jsfiddle.net/60fxtfen/1/
$(document).on('change', 'select[name="additems"]', function(){
if($('#additems option:selected').text() === "Add new"){
$('table tbody').append($('table tbody tr:first-child').clone());
$('table tbody tr:last-child td:first-child').text($('table tbody tr').length);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%">
<thead>
<tr>
<th width="5%">Sr.no</th>
<th width="20%">Items</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Unit</th>
<th>Amount</th>
<th>Tax</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="additems" name="additems" class="form-control" required="required">
<option selected>-- Select --</option>
<option>Add new</option>
<option value="1"> Abc </option>
<option value="2"> IT services </option>
<option value="3"> JS Enterprises</option>
</select>
</td>
<td>Dell 500 series</td>
<td>55,333</td>
<td>10</td>
<td>NA</td>
<td>5,53,330</td>
<td>8%</td>
<td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td>
</tr>
</tbody>
</table>
I have created the baseline, you need to let me know where to add delete & edit option.

Hide table row by dropdown

I have 2 dropdown menu (Username & Gender) and I have table with 3 columns (username, name, and gender).
I want to filter the table based on dropdown value. What must I do ?
Here's the code :
<select class="form-control selectpicker">
<option value="">Username</option>
<option value="">user1</option>
<option value="">user2</option>
<option value="">user3</option>
</select>
<select class="form-control selectpicker">
<option value="">Gender</option>
<option value="">M</option>
<option value="">F</option>
</select>
</div>
<table class="dynamicTable tableTools table table-striped table-primary">
<!-- Table heading -->
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>user1</td>
<td>Jane</td>
<td>F</td>
</tr>
<tr>
<td>user2</td>
<td>John</td>
<td>M</td>
</tr>
<tr>
<td>user3</td>
<td>Jack</td>
<td>M</td>
</tr>
</tbody>
<!-- // Table body END -->
</table>
<!-- // Table END -->

I create this sollution.
html
<select id="username" class="form-control selectpicker">
<option value="">Username</option>
<option value="">user1</option>
<option value="">user2</option>
<option value="">user3</option>
</select>
<select id="gender" class="form-control selectpicker">
<option value="">Gender</option>
<option value="">M</option>
<option value="">F</option>
</select>
<table class="dynamicTable tableTools table table-striped table-primary">
<!-- Table heading -->
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>user1</td>
<td>Jane</td>
<td>F</td>
</tr>
<tr>
<td>user2</td>
<td>John</td>
<td>M</td>
</tr>
<tr>
<td>user3</td>
<td>Jack</td>
<td>M</td>
</tr>
</tbody>
<!-- // Table body END -->
</table>
js
$("#username").on("change",
function(){
var a = $(this).find("option:selected").html();
$("table tr td:first-child").each(
function(){
if($(this).html() != a){
$(this).parent().hide();
}
else{
$(this).parent().show();
}
});
});
$("#gender").on("change",
function(){
var a = $(this).find("option:selected").html();
$("table tr td").each(
function(){
if($(this).html() != a){
$(this).parent().hide();
}
else{
$(this).parent().show();
}
});
});
fiddle

I made a simple script with jQuery (you have to include the jquery library).
HTML:
<select name="username" class="form-control selectpicker">
<option value="">Username</option>
<option value="">user1</option>
<option value="">user2</option>
<option value="">user3</option>
</select>
<select name="gender" class="form-control selectpicker">
<option value="">Gender</option>
<option value="">M</option>
<option value="">F</option>
</select>
</div>
<table id="tbl" class="dynamicTable tableTools table table-striped table-primary">
<!-- Table heading -->
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>user1</td>
<td>Jane</td>
<td>F</td>
</tr>
<tr>
<td>user2</td>
<td>John</td>
<td>M</td>
</tr>
<tr>
<td>user3</td>
<td>Jack</td>
<td>M</td>
</tr>
</tbody>
<!-- // Table body END -->
</table>
<!-- // Table END -->
Javascript (jQuery):
$(document).ready(function() {
function calculate() {
$('#tbl tbody tr').show();
var sel_username = $('select[name="username"] option:selected').text();
var sel_gender = $('select[name="gender"] option:selected').text();
if(sel_username == 'Username' && sel_gender == 'Gender') {
return;
}
$('#tbl tbody tr').each(function() {
var col_username = $(this).find('td').first();
var col_gender = $(this).find('td').last();
if(col_username.text() !== sel_username && sel_username !== 'Username') {
$(this).hide();
}
if(col_gender.text() !== sel_gender && sel_gender !== 'Gender') {
if($(this).is(':visible')) {
$(this).hide();
}
}
});
}
$('select[name="username"]').change(function() {
calculate();
});
$('select[name="gender"]').change(function() {
calculate();
});
});
JSFIDDLE