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>
Related
I have a simple form with dynamic number of rows, each row having the same fields.
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">
<p>1</p>
</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<!-- Dynamic rows appear here -->
</tbody>
</table>
Form is present as a table, but it's not a strict requirement, so can be flexible here.
On form submission I need this form data to be converted to JSON.
I have this function to convert form into JSON:
function convertFormToJSON(form) {
const array = $(form).serializeArray();
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?
Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:
document.querySelector("button").onclick=ev=>{
let res=[...document.getElementById("tbody").children].map(tr=>
Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
[el.name,el.value])));
console.log(res);
}
input,select {width:80px;}
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">1</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R2" name="record">
<td class="row-index text-center">2</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R3" name="record">
<td class="row-index text-center">3</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button>collect data</button>
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.
For now I can get the selected values from the event onchange in my dropdown inside my table but it only works on the first row of my table. If I am going to change values from other rows it will still getting the value from the first row.
Here is my code:
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
}
</tbody>
</table>
And simple script to read the selected values:
function getSelValue() {
alert(document.getElementById("drpTechnical").value)
}
document.getElementById returns allways only the first element with this ID since IDs should be unique.
What you want is to get the id from that element that has been changed. So you need this
function getSelValue(this) {
alert(this.value)
}
And your table should look like this
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
i think you made a small mistake there, the id you set to the select tag is called "drpTechnical" but in the function you try to call element with id of "getSelValue"
Try change the codes like below
Code updates :
<td ALIGN="center">
<select onchange="getSelValue(this)" class="testerDrop"
style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
<script>
function getSelValue(obj) {
alert(obj.value)
}
</script>
function getSelValue(e) {
alert(e.value)
}
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
</tbody>
</table>
Try this.
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.
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