Develop Reference

removing the td with JavaScript

Is there a way to remove the td(please see commented td"to be removed") from this table without editing the HTML.
Also, not using only the classes as I have the same classes in another tables that I don't need to be removed, so targeting the span id as well. Thanks in advance!
<div id="pnlPersonalDetails2">
</div><table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody><tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr><tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<!-- To be removed
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>-->
</tr>
</tbody></table>
<div id="pnlPersonalDetails3">
</div><table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody><tr>
<!-- To be removed
<td colspan="2" class="pd_question">
<span id="lbl3"></span>
</td>-->
</tr><tr>
<td class="pd_label">LAST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_3" type="text" id="Name微statictext_3" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl04" style="visibility:hidden;">Required Field</span>
</td>
</tr>
This is how it looks now
enter image description here
This is how I want to look after removing the commented td's
enter image description here
I have attached the entire code here https://codepen.io/duicug/pen/VGreQZ

<td id="hideTD" class="error_label" style="visibility: hidden;">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
<script>
document.getElementById("hideTD").style.visibility = "hidden";
</script>
You can refer this website , good sample https://www.w3schools.com/jsref/prop_style_display.asp
Hope that can help you.

<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
<td colspan="2" class="pd_question">
<span id="lbl3"></span>
</td>
<script>
document.getElementById("ctl03").parentElement.remove();
document.getElementById("lbl3").parentElement.remove();
</script>

You could use querySelector to find the class such:
var target = document.querySelector("#pnlPersonalDetails2 .error_label");
There are then multiple ways to remove it from the DOM.
You could leave it in memory so that you can easily show it again later:
target.style.display = "none"; //Undo by setting to "" or to previous value
Or you could make it invisible which leaves it in memory and change the layout of surrounding contents:
target.style.visibility = "hidden"; //Undo by setting to "" or to previous value
Or you could completely remove it from the DOM:
target.parent.removeChild(target);

try it with jquery:
$("#lbl2").toggle();
maybe this will help you?
var el = document.getElementById('lbl2');
el.parentElement.hidden = true;
or remove td
var el = document.getElementById('ctl03');
el.parentElement.remove();

How to store values(i.e. 'Y'- for checked, 'N' - for unchecked) of multiple checkbox in database using angularjs?

I've attached the screenshot of my module. I want the store the values('Y','N') of selected checkbox in database
<tr data-ng-repeat="data in RoleOperation track by $index">
<td>{{$index + 1}}</td>
<td>
<label>{{RoleOperation[$index].vname}}</label>
</td>
<td>
<label>{{RoleOperation[$index].id}}</label>
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.viewflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.addflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.editflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.deleteflg[$index]" />
</td>
</tr>
Here RoleOperation is Object, which contains names of categories.
How to give value to data-ng-model? And how to access particular checkbox in controller?
plz help me..

You can use ng-true-value and ng-false-value to set your preferred values.
To set Y and N use the below code.
<input type="checkbox" data-ng-model="data.viewflg[$index]" ng-true-value="'Y'" ng-false-value="'N'">
-- EDIT --
Here is a sample

jquery not functioning for radio button

I have two groups that have a radio button. What it does is, when a package above is chosen, the chosen package below should be the same from the above, vice-versa. Example is if I choose "Deluxe" in the first one, the other one should also be "Deluxe". The problem is, when I choose, "Deluxe" at the top, the other package is still on the previous selection. At first try, everything is working but when you try selecting again, the problem occurs. Also I want to highlight the selected package.
The other part of the code is here
Html
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA"/>
<col id="colB"/>
<col id="colC"/>
<col id="colD"/>
<col id="colE"/>
</colgroup>
<tr>
<td style="text-align: left;"><h5>Choose Package</h5></td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox" onclick="ChangeColColor(this,'colC')"/>
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox" onclick="ChangeColColor(this,'colD')"/>
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox" onclick="ChangeColColor(this,'colE')"/>
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
</tbody>
</table>
<table class="tblsubPackage" width="90%">
<tr>
<td width="31%"><h5>Choose Package</h5></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY </div><span class="s11">$49</span>
</div>
<center>
<input type="radio" name="radiog_lit" checked value="49.00" id="tscbx1" class="css-checkbox" />
<label for="tscbx1" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="79.00" id="tscbx2" class="css-checkbox" />
<label for="tscbx2" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="149.00" id="tscbx3" class="css-checkbox" />
<label for="tscbx3" class="css-label"></label>
</center>
</td>
</tr>
</table>

handle it with single click event.
$('.tcbx').click(function (event) {
var test = $(this).data('test');
$('#'+test).prop('checked', this.checked);
});
just make sure you have a data attribute in option which matches with the id attribute of sub package or viceversa
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1"
class="css-checkbox tcbx" data-test="tscbx1" />
//---^^^^ added a class here
and add a class.
I know there are lot of other ways to figure this out, one of which is comparing the index in both tables and doing the needful likewise. But for fast response and since you already have different id for all the checkboxes, i added this function.
This is just a sample you can actaully avoid having different id hope you will work on it
Note: you can change test to what ever variable you like.
here you go
http://jsfiddle.net/aohsny6y/20/

You can reduce your code by using jQuery's start with selector for radio button having ids starting with either tscbx or tcbx as shown below and get the index of the id to find corresponding radio button.
You need to use .prop() instead of .attr()
Also to set background color, you can put data-col attribute in radio button and use the same to find col and set its background color (though it is not working in JSFiddle).
<input type="radio" name="radiog_dark"
checked value="49.00" id="tcbx1"
class="css-checkbox" data-col="colC"/>
jQuery:-
$('input[type="radio"][id^="tscbx"]').click(function() {
var index = $(this).attr('id').replace('tscbx','');
$('#tcbx'+index).prop('checked', true);
});
$('input[type="radio"][id^=tcbx]').click(function() {
var index = $(this).attr('id').replace('tcbx','');
$('#tscbx'+index).prop('checked', true);
//remove all colgroup background
$('colgroup col').css('background-color','white');
//put selected bacground for selected radio
var colId= $(this).data('col');
var varColor = "rgba(0,140,203,.2)";
$('#'+colId).css('background-color',varColor);
});
JSFiddle Demo

For jQuery 1.9 or higher you need to user .prop("checked", true) instead of .atrr()
Fot the Highlighting create a CSS Class and Change it with .toogleClass

$('#tscbx3').attr('checked','true')

how to dynamically calculate value in the text box

i have a invoice where i have to calculate some value in the textbox using jquery.
I don't know much about Jquery. Please help me to solve this problem.
In my invoice there is quantity textbox,
if users enters the quantity then dynamically it should show the
calculated price i.e (total_subPrice= unit_price * quantity) in
another textbox called "price".
And again the total sum of all the price should be visible in the button as a Total.
please check my below html code and run it in browser then you will understand my problem exactly.
<html>
<body>
<form name="invoice form" action="saveToDatabase.java">
<table border="1" height="30%" width="30%">
<tr>
<td align="center" colspan="5">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br/>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input type="text" value="400" name="unitprice1" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity1" value="2" size="2"/></td>
<td width="25%"><input type="text" name="price1" value="400" size="4"/></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input type="text" value="700" name="unitprice2" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity2" value="1" size="2"/></td>
<td width="25%"><input type="text" name="price2=" value="700" size="4"/></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input type="text" value="50" name="unitprice1" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity1" value="3" size="2"/></td>
<td width="25%"><input type="text" name="price1" value="150" size="4"/></td>
</tr>
<tr>
<td align="right" colspan="5">Total<input type="text" name="subtotal" value="1250" size="12" disabled/></td>
</tr>
</table>
</form></body>
</html>

I enjoy seeing practical examples to learn stuff like jQuery myself, so I made an example for your problem so you can see how it works: http://jsfiddle.net/bozdoz/LGyeq/
Line by line:
Select all of the input tags and call a function if they are changed:
$('input').change(function(){
create a variable to store the totals, to calculate the subtotal:
var linetotals = 0;
select each element with class 'lineTotal' (which I added, so that we could select them):
$('.lineTotal').each(function(){
Get price and quantity by finding the input elements within the same tr element (eq(#) gets the first and second element respectively):
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
Set the lineTotal class element to the new total, and add the total to lineTotals variable:
$(this).val(price*quantity);
linetotals += price*quantity;
});
Set the subtotal to the value of the linetotals variable:
$('#total').val(linetotals);
});​
This is one way you can do it. It has a lot to do with preference. Hope this is a good start.
Update
Re: Askers new request for more generalized code
Use CSS Attribute selectors to select the input fields. JSFiddle is updated with the following code:
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});​

select specific input element in a specific row and column

Cosider this image:
How I can select it without it's ID with jQuery? I mean how I can select it like this statement:
Find Input in Row with Code=1000 and Column Desc2
thanks
Edit 1)
HTML Code
<table border="1" width="300px">
<tr>
<td>
Desc2
</td>
<td>
Desc1
</td>
<td>
Code
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text1" type="text" />
</td>
<td>
</td>
<td>
1000
</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">
</td>
<td bgcolor="#FFFFCC">
</td>
<td bgcolor="#FFFFCC">
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text2" type="text" />
</td>
<td>
</td>
<td>
1001
</td>
<tr>
<td bgcolor="#CCCCB3" class="style1">
<input id="Text3" type="text" />
</td>
<td class="style1">
</td>
<td class="style1">
1002
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text4" type="text" />
</td>
<td>
</td>
<td>
1003
</td>
</tr>
</table>

Select the last cell, filter the row whose last cell has a value which is equal to "1000", and select the first input element of the collection:
$("table td:last-of-type").filter(function(){
return $(this).text() == "1000";
}).parent().find("input:first");
For constructing such selectors, you can use the following:
:eq() and .eq()
:nth-child() (for a specific child position only!)
Warning: Do not fall in the trap of contains(). This method select all elements which contain the given phrase. .contains(1000) will also select <td>10000</td>.