We Keep Coding

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>

Disable specific rows while searching in a DataTable

I'm using a DataTable search. I am having a tables in which I want to search a but by disabling some rows.
$(function() {
var oTable = $('#partnerTable').DataTable({
"bPaginate": $('#partnerTable tbody tr').length > 50,
"iDisplayLength": 50,
"bAutoWidth": false,
"bInfo": false,
"aoColumns": [
null,
null,
null,
null
]
});
$('#partnerSearch').keyup(function() {
var column = $('#getId').val();
if (column == "pname")
oTable.columns(0).search($(this).val()).draw();
else if (column == "tel")
oTable.columns(1).search($(this).val()).draw();
else if (column == "email")
oTable.columns(2).search($(this).val()).draw();
else if (column == "pAgents") {
oTable.columns(3).search($(this).val()).draw();
} else {
oTable.search($(this).val()).draw();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<input class="form-control provider-search" placeholder="Search" id="partnerSearch" type="text">
<select id="getId" title="Provider" class="form-control round provider-select">
<option value="all">ALL</option>
<option value="pName">PROVIDER NAME</option>
<option value="tel">TEL</option>
<option value="email">EMAIL</option>
<option value="pAgents">PARTNER AGENTS</option>
</select>
<table id="partnerTable" class="table table-responsive">
<thead style="white-space: nowrap;">
<tr style="font-size: 12px;color: #464646;border-bottom: 4px solid #E9E9E9 !important;">
<th>PROVIDER NAME</th>
<th>TEL</th>
<th>EMAIL</th>
<th>PARTNER AGENTS</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>0172</td>
<td>sbc#gmail.com</td>
<td>mno</td>
</tr>
<tr>
<td>DEF</td>
<td>0177</td>
<td>def#gmail.com</td>
<td></td>
</tr>
<tr>
<td>GHI</td>
<td>0179</td>
<td>ghi#gmail.com</td>
<td>pqr</td>
</tr>
<tr>
<td>JK</td>
<td>0181</td>
<td>jkl#gmail.com</td>
<td></td>
</tr>
</tbody>
</table>
Now while searching if I select providers then I want partner-agents having data must be disabled & search must only apply for empty partner-agents & when I select others I want whole data.
Can this be possible.
Note :- My data is dynamic

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.

how to display tables in html using dropdown list selcection

I want to display the data based on selection in drop-down list.
for example if i select empty then it display all table data.
if i select 'a' then it will display data in rows 'a'..
please suggest how to achieve this requirement.
<html>
<head>
<title>details</title>
<style>
table,
th,
td {
border: 0.5px solid black;
}
</style>
</head>
<div>
<body>
<h1>details</h1>
<select>
<option id=""></option>
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
<table>
<tr bgcolor="#C2D0C7">
<th>name</th>
<th>Description</th>
<th>URL</th>
</tr>
<tr>
<td rowspan="2">a</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
</table>
</body>
</div>
</html>

cooTry this using with jquery script. Matching the contains() word's from selected input
Updated answer for single HTML page
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 0.5px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function change(that) { //in this get the value of changing input
var a = $(that).val() //its the value of selected data
if (a != "") { //it's check the not empty condition
$('tr').not('tr[bgcolor="#C2D0C7"]').hide() //its prevent the heading row `not()`
$('td[rowspan^="2"]:contains(' + a + ')').parent('tr').show() //match the seleted value to display
$('td[rowspan^="2"]:contains(' + a + ')').parent('tr').next().show()
//it matches the next row of other two columns it is the same in the first column
} else {
$('tr').show() //it selects empty data show all rows
}
}
</script>
</head>
<body>
<h1>details</h1>
<select onchange="change(this)">
<option id=""></option>
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
<table>
<tr bgcolor="#C2D0C7">
<th>name</th>
<th>Description</th>
<th>URL</th>
</tr>
<tr>
<td rowspan="2">a</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>site URL</td>
<td>xyz.com
</td>
</tr>
<tr>
<td>site1 url</td>
<td>xyz.com
</td>
</tr>
</table>
</body>
</html>

i am not Giving you the Complete solution but it will help you more.
HTML
<select id="drop">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
JavaScript
$("#drop").change(function () {
var selectedvalue= this.value;
if(selectedvalue==0)
{
//clear the table
//get all results and show in table
}
else
{
//Clear the table
//get all records based on selectedvalue and display as you wish
}
});

Add Item to Table - HTML/CSS/JS

Let's say I have a dropdown (or combobox) and it has list of things. Once I select one thing from the list, it will automatically add to Table. How would I do that? Possible it is only HTML/JS?
Dropdown:
<select class="combobox form-control" style="display: none;">
<option value="" selected="selected">Point Guard</option>
<option value="CP3">Chris Paul (93)</option>
</select>
Table:
<table class="table">
<thead>
<tr>
<th>Position</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
Thanks.

Using jQuery:
$('.combobox').change(function(e) {
var selectedVal = $(this).val();
$('.table').append('<tr><td>' + selectedVal + '</td></tr>');
});
I hope you get the idea.

Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$(".combobox").change(function () {
var temp1 = $(".combobox option:selected").text().split(' ');
$('.table tr:last').after('<tr><td>' + $('.table tr').length + '</td><td>' + temp1[0] + '</td><td>' + temp1[1] + '</td></tr>');
});
});
function removeItem() {
$('.table tbody tr:first').remove();
//.eq() -- You can also use this to fetch nth row
}
</script>
</head>
<body>
<select class="combobox form-control">
<option value="" selected="selected">Point Guard</option>
<option value="CP3">Chris Paul (93)</option>
</select>
<button onclick="removeItem()">Remove First Row</button>
<table class="table">
<thead>
<tr>
<th>Position</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
</body>
</html>