This is an expansion of a previous question Dynamically append html table cell and the html has been slightly changed.
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<select id="e1">
<option value="1">Name 1</option>
<option value="2">Name 2</option>
<option value="3">Name 3</option>
</select>
</td>
<td>
<select id="e2">
<option value="#00ff00">Complete</option>
<option value="#ffff00">In Progress</option>
<option value="#ff0000">Incomplete</option>
</select>
</td>
<td>
<input type="datetime" />
</td>
<td>
<input type="text" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Add Row" />
The updated jsfiddle is https://jsfiddle.net/marcwebdude/48ng08tq/13/ . The problem is the append function at lines 47-64 where it is automatically appending a row.
$(function () {
var rowTamplate = $('table.tablesaw tbody tr').eq(0);
var rowContent = [
'<input type="text" value="Name" />',
'<input type="text" value="Title" />',
'<select><option>Name 1</option><option>Name 2</option><option>Name 3</option></select>',
'<select><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select>',
'<input type="datetime" value="Select Date" />',
'<input type="text" />'
];
var rowToadd = rowTamplate.clone();
rowToadd.find('td').each(function (index, element) {
$(element).append(rowContent[index]);
});
rowToadd.insertAfter('table.tablesaw tr:eq(2)');
for (var i = 0; i < 10; i++) {
rowToadd.clone().insertAfter('table.tablesaw tr:eq(2)');
}
I am looking for a solution that when the button is clicked it adds a row with the appended html. Not to automatically add it after a currently existing row. For instance if this table was blank, a button click would add a row with these 6 specified columns and the inputs that coincide with each cell.
The second issue with my existing script is that it's not formatting the appended html, when a row is added manually into the html file, it's formatting correctly, but not if it's appended via jquery.
The updated jsfiddle with revised jquery is https://jsfiddle.net/marcwebdude/48ng08tq/73/ , and so far it's appending contents into the table correctly. Here's the html
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Add Row" id="button" />
</div>
and here's the jquery
$(document).ready(function () {
$('#button').on('click', function(){
$('.tablesaw').find('tbody').append($('<tr><td><input type="text" value="Name" /></td><td class="title"><input type="text" value="Title" /></td><td><select class="e1"><option value="0">-- User --</option><option>Name 1</option><option>Name 2</option><option>Name 3</option></select></td><td><select class="e2"><option value="#fff">-- Status --</option><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select></td><td><input type="datetime" value="Select Date" /></td><td><input type="text" /></td></tr>'));
$('.e1').select2();
$('.e2').select2().on('change', function () {
$(this).next()
.find('.select2-selection')
.css({ backgroundColor: this.value });
}).trigger('change');
});
});
This appends the correct data into each cell as well as inherits styles once the row is created.
Related
So I need to calculate the sum of input values for each input cell and show it dynamically to the last cell of the row. Refer following image
In the above image the number of products can vary so rows generated are not fixed
Now as shown in the image I need to update the value of final amount for each row dynamically using input available for each row's cells
I am attaching HTML code for the table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Product Category</th>
<th scope="col">Sub Category</th>
<th scope="col">Master Category</th>
<th scope="col">Product Weight</th>
<th scope="col">Labour</th>
<th scope="col">Price</th>
<th scope="col">SGST (In %)</th>
<th scope="col">CGST (In %)</th>
<th scope="col">Discount</th>
<th scope="col">Final Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of _selectedProductsData;index as i">
<th scope="row">{{i+1}}</th>
<td>{{item.productCategory}}</td>
<td>{{item.subCategory}}</td>
<td>{{item.masterCategory}}</td>
<td>{{item.productWeight}} gms</td>
<td>
<input class="form-control labourInput" type="number" id="{{item.productGuid}}-labour"
placeholder="Enter Labour">
</td>
<td>
<input class="form-control priceInput" type="number" id="{{item.productGuid}}-price"
placeholder="Enter Price">
</td>
<td>
<input class="form-control sgstInput" type="number" id="{{item.productGuid}}-SGST"
placeholder="Enter SGST">
</td>
<td>
<input class="form-control cgstInput" type="number" id="{{item.productGuid}}-CGST"
placeholder="Enter CGST">
</td>
<td>
<input class="form-control discountInput" type="number"
id="{{item.productGuid}}-discount" placeholder="Enter Discount">
</td>
<td>
{{calculateTotalAmountOfEachProduct(item.productGuid)}}
</td>
</tr>
</tbody>
</table>
each row (product) has its own productGuid
I've created method calculateTotalAmountOfEachProduct(productGuid:string) but it does not change the value it always shows 0 even when input value is changed
Following is the code for the same:
calculateTotalAmountOfEachProduct(productGuid:string):number {
let labourInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-labour`)).value)
let priceInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-price`)).value)
let sgstInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-SGST`)).value)
let cgstInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-CGST`)).value)
let discountInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-discount`)).value)
return labourInput+priceInput+sgstInput+cgstInput+discountInput
}
I am not sure how to achieve this in angular.
There are multiple ways of achieving what you are asking, you could do it using local references on each input, and then listening for the input event for changes in the values like the following:
This is just an example:
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Labour</th>
<th scope="col">Price</th>
<th scope="col">SGST (In %)</th>
<th scope="col">CGST (In %)</th>
<th scope="col">Discount</th>
<th scope="col">Final Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data; let i = index">
<th>{{ i + 1 }}</th>
<th><input type="number" (input)="d.labor = getValue($event)" #labor [value]="d.labor" /></th>
<th><input type="number" (input)="d.price = getValue($event)" #price [value]="d.price" /></th>
<th><input type="number" (input)="d.sgst = getValue($event)" #sgst [value]="d.sgst" /></th>
<th><input type="number" (input)="d.cgst = getValue($event)" #cgst [value]="d.cgst" /></th>
<th><input type="number" (input)="d.discount = getValue($event)" #discount [value]="d.discount" /></th>
<th>
<!-->the plus sign is for casting from string to number<-->
<label
>{{ +labor.value + +price.value + +sgst.value + +cgst.value + +discount.value }}
</label>
</th>
</tr>
</tbody>
</table>
component
#Component({...})
export class DemoComponent {
data = [...] // some data
getValue(event: Event): number {
return Number((event.target as HTMLInputElement).value);
}
}
Here's the demo
I want to delete every row from the table using javascirpt Here's the code
I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}
Explination
This will get all tr (rows) for the tables body.
Then it will delete (remove) any that it finds
Solution
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});
Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>
If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
Try this way...
const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
tRow.remove();
}
try this code:
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr id = "row1">
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
<button onclick = "deletetr()">
Click here
</button>
<script>
function deletetr() {
document.getElementById("row1").remove();
}
</script>
</div>
I need to get the value from the textbox(Discount or quantity) and need to change the last column value of the quantity or discount in the table
<div class="col-md-2">
<h5 class="bordercool"><b>Quantity</b></h5>
<input type="text" class="form-control text-uppercase" id="Quantity" placeholder="Quantity">
</div>
<div class="col-md-2">
<h5 class="bordercool"><b>Discount</b></h5>
<input type="text" class="form-control text-uppercase" id="Discount" placeholder="Discount">
</div>
<table id="sales_table" class="table table-bordered table-hover ">
<thead>
<tr class="tableheader">
<th style="width:40px">#</th>
<th style="width:250px">Item Name</th>
<th style="width:120px">Price</th>
<th style="width:60px">Disc %</th>
<th style="width:60px">Qty</th>
<th style="width:60px">GST %</th>
<th style="width:60px">GST AMT</th>
<th style="width:60px">CGST %</th>
<th style="width:60px">CGST AMT</th>
<th style="width:120px">Total</th>
<th style="width:px"></th>
</tr>
</thead>
<tbody></tbody>
</table>
let Quantity = document.getElementById('Quantity')
let Discount = document.getElementById('Discount')
Quantity.addEventListener('keyup',function(e){
document.querySelector('.tableheader > .columnQty').innerText = 'Qty '+ e.target.value +'%';
},false)
Discount.addEventListener('keyup',function(e){
document.querySelector('.tableheader > .columnDisc').innerText = 'Disc '+ e.target.value +'%';
},false)
<div class="col-md-2">
<h5 class="bordercool"><b>Quantity</b></h5>
<input type="text" class="form-control text-uppercase" id="Quantity" placeholder="Quantity">
</div>
<div class="col-md-2">
<h5 class="bordercool"><b>Discount</b></h5>
<input type="text" class="form-control text-uppercase" id="Discount" placeholder="Discount">
</div>
<table id="sales_table" class="table table-bordered table-hover ">
<thead>
<tr class="tableheader">
<th style="width:40px">#</th>
<th style="width:250px">Item Name</th>
<th style="width:120px">Price</th>
<th style="width:60px" class='columnDisc'>Disc %</th>
<th style="width:60px" class='columnQty'>Qty</th>
<th style="width:60px">GST %</th>
<th style="width:60px">GST AMT</th>
<th style="width:60px">CGST %</th>
<th style="width:60px">CGST AMT</th>
<th style="width:120px">Total</th>
<th style="width:px" class="changedItem"></th>
</tr>
</thead>
<tbody></tbody>
</table>
this will capture the input and place it in a new row. just enter a number for quantity and hit enter. duplicate code for discount.
var quantInput = document.getElementById('Quantity');
quantInput.addEventListener("keyup", function(event) {
// Cancel the default action, if needed
// event.preventDefault();
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
var quantity =document.getElementById("Quantity");
var table = document.getElementById("sales_table");
var row = table.insertRow(1);
var cell = new Array(11);
var length= document.getElementById("sales_table").rows.length;
var row = table.insertRow(length);
for(var i = 0; i<11;i++){
cell[i] = row.insertCell(i);
}
cell[4].innerHTML = quantity.value;
document.getElementById("Quantity").value = '';
}
});
<div class="col-md-2">
<h5 class="bordercool"><b>Quantity</b></h5>
<input type="text" class="form-control text-uppercase" id="Quantity" placeholder="Quantity" >
</div>
<div class="col-md-2">
<h5 class="bordercool"><b>Discount</b></h5>
<input type="text" class="form-control text-uppercase" id="Discount" placeholder="Discount">
</div>
<table id="sales_table" class="table table-bordered table-hover ">
<thead>
<tr class="tableheader">
<th style="width:40px">#</th>
<th style="width:250px">Item Name</th>
<th style="width:120px">Price</th>
<th style="width:60px">Disc %</th>
<th style="width:60px">Qty</th>
<th style="width:60px">GST %</th>
<th style="width:60px">GST AMT</th>
<th style="width:60px">CGST %</th>
<th style="width:60px">CGST AMT</th>
<th style="width:120px">Total</th>
<th style="width:px"></th>
</tr>
</thead>
<tbody></tbody>
</table>
I have added new rows dynamically with jQuery and applied a function but I want to apply this differently for each row. right now its applying commonly for every rows.
HTML code:
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text"></td>
<td>
<select class="form-control" id="bank_ac_no">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Jquery Codes:
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
if ($(this).val() == 'Vault'){
$('#bank_title, #bank_ac_no').hide();
}
else if ($(this).val() == 'Bank'){
$("tr.bank_deposit").each(function (){
$('#bank_title, #bank_ac_no').show();
});
}
});
When I am changing the deposit method I want to hide/show the two fields in each row but its applying in every row.
see the demo with codes:
https://jsfiddle.net/wasid/33qp9ewn/3/
You can add an attribute (like row-id) for inputs to determine which row has been processed. I modified HTML and Javascript codes. Also, you can take a look modifed codes as Fiddle Demo
HTML
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method" row-id="0">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text" row-id="0"></td>
<td>
<select class="form-control" id="bank_ac_no" row-id="0">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Javascript;
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
var rowId = $(this).attr("row-id");
if ($(this).val() == 'Vault'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
}
else if ($(this).val() == 'Bank'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
}
});
On select of the dropdown field: database I want to hide specific rows, but only the fields under database. How can I hide only part of the row while keeping others in place? I tried to use JQUERY and attach an ID to the row but the whole row was deleting, and I want to keep the right side.
I know I can do style visibility: hidden, but I want the rows to disappear and move up if the fields are not needed.
<tr>
<th>* Database</th>
<th class="th_background" style="border-right-style: groove;"><select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected">Oracle</option>
<option value="mssql">Sql Server</option>
<option value="teraData">TeraData</option>
<option value="epic">Generic ODBC(Chronicles)</option>
<option value="sas">SAS</option>
</select>
</th>
<th class="th_background"><input type="radio" name="refreshTde"
value="yes" checked> <span data-toggle="tooltip"
title="This option creates new TDE or replaces existing TDE file with full data.">Full
Refresh <i class="fa fa-question-circle"></i></span></th>
<th class="th_background"><input type="radio" name="refreshTde"
value="no"> <span data-toggle="tooltip"
title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
Refresh <i class="fa fa-question-circle"></i></span></th>
</tr>
<tr>
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span
style="color: white;">* SQL Query to Generate TDE</span></th>
I just want to hide and collapse this part:
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
http://jsfiddle.net/wf7j5tn8/
If I'm understanding your question correctly, you should be able to just add a class to the elements you want to hide, then use that class to apply 'display: none' to those elements.
Here's your fiddle updated with what I mean.
And here's the relevant code from that fiddle:
HTML
<th class="hidden">* Service ID</th>
<th class="th_background hidden"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter
SID">
</th>
CSS
.hidden {
display: none;
}
You can attach classes to the rows, or just use whatever queryselector will work for you.
var options = document.querySelectorAll('option')
var headers = document.querySelectorAll('th')
options[3].style.display = "none"
headers[2].style.display = "none"
<link rel="stylesheet" href="http://www.w3schools.com/stdtheme.css" type="text/css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" type="text/css">
<table class="w3-table-all" style="width:100%">
<tbody><tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody></table>
<select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected">Oracle</option>
<option value="mssql">Sql Server</option>
<option value="teraData">TeraData</option>
<option value="epic">Generic ODBC(Chronicles)</option>
<option value="sas">SAS</option>
</select>
Exact Solution might be this
<th id="dataHide">* Service ID</th> <!-- add id dataHide to your th -->
//add these to js function
$("input#sidText").css("visibility", "hidden");
$("#dataHide").css("visibility","hidden");
I think this is what you want: http://jsfiddle.net/wf7j5tn8/7/
The other way is that you disable the field, I would not want to hide a feature from users, rather just disable it
$("input#sidText").prop('disabled','disabled');
HTML
<tr id="dataHide"> <!-- id assigned here to hide the the row -->
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span></th>
</tr>
js/jQuery
function database_details() {
$("#dataHide").hide(); //hides the id (#) dataHide assigned to the TR, hence removing the whole row.
//give this id (dataHide) to any element you want to hide on change of select dropdown
}
This will work. Hope it solves your problem.