We Keep Coding

Alert box displays NaN after the desired pop up

Afer going through all the suggestions, this is what i have come with. But if I am having something like $100 instead of 100, is there anyway i can covert it into number ?
var selectedRows = document.getElementsByClassName('selected');
limit = 0; //set limit
checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]');
function checker(elem) {
if (elem.checked) {
limit++;
} else {
limit--;
}
for (i = 0; i < checkboxes.length; i++) {
if (limit == 2) {
if (!checkboxes[i].checked) {
checkboxes[i].disabled = true;
}
} else {
if (!checkboxes[i].checked) {
checkboxes[i].disabled = false;
}
}
}
}
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
checker(this);
}
}
function inputChanged(event) {
event.target.parentElement.parentElement.className =
event.target.checked ? 'selected' : '';
}
function Calculate() {
var cal = 0;
for (var i = 0; i < selectedRows.length-1; i++) {
cal = Number(selectedRows[i].textContent - selectedRows[i+1].textContent);
}
alert(Number(cal))
}
background-color: yellow;
<table class="checkboxdiv">
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>$100</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>$20</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>$40</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>$21</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>$12</td>
</tr>
</table>
<button onclick="Calculate()">Calculate</button>
Hi I am trying to calculate the difference between two values of the checkbox and displaying the popup (alert box). I am getting 2 issues here
After getting the result popup I am getting one more pop up which says Nan. How do i remove that?
I want to limit the number of selected checkbox to 2, once 2 checkboxes are selected remaining should be disabled I have written the code to if length is greater than 2, checkbox should be disabled but that is not working.
var selectedRows = document.getElementsByClassName('selected');
if(selectedRows.length>2){
document.getElementById("mycheck").disabled = true;
}
function inputChanged(event) {
event.target.parentElement.parentElement.className =
event.target.checked ? 'selected' : '';
}
function Calculate() {
for (var i = 0; i < selectedRows.length; ++i) {
alert(selectedRows[i]?.textContent.trim() - selectedRows[i+1]?.textContent.trim());
}
}
.selected {
background-color: yellow;
}
<table>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>100</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>20</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>40</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>21</td>
</tr>
<tr>
<td>
<input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>12</td>
</tr>
</table>
<button onclick="Calculate()">Calculate</button>

First of all the attribute id should be unique in a document, you can use class instead.
You should access the selectedRows inside the function Calculate.
Since you want to limit the number of selected checkbox to 2 your condition should be .length > 1.
You can try the following way:
function inputChanged(event) {
//get all checked
var mycheck = document.querySelectorAll('.mycheck:checked');
//get all unchecked
var mycheckNot = document.querySelectorAll('.mycheck:not(:checked)');
if(mycheck.length > 1){
//disabled all unchecked
for (var i = 0; i < mycheckNot.length; i++) {
mycheckNot[i].disabled = true;
}
}
else{
//enable all unchecked
for (var i = 0; i < mycheckNot.length; i++) {
mycheckNot[i].disabled = false;
}
}
event.target.parentElement.parentElement.className =
event.target.checked ? 'selected' : '';
}
function Calculate() {
//get all selected
var selectedRows = document.getElementsByClassName('selected');
var sum = 0 ;
for (var i = 0; i < selectedRows.length; i++) {
//convert the value to number and sum them up
sum += Number(selectedRows[i].textContent)
}
alert(sum);
}
.selected {
background-color: yellow;
}
<table>
<tr>
<td>
<input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>100</td>
</tr>
<tr>
<td>
<input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>20</td>
</tr>
<tr>
<td>
<input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>40</td>
</tr>
<tr>
<td>
<input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>21</td>
</tr>
<tr>
<td>
<input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
</td>
<td>12</td>
</tr>
</table>
<button onclick="Calculate()">Calculate</button>

Jquery - add new rows table into wrong div

I am pretty new to jquery. I have the following code. Here I wants to get new rows in the table on clicking add button in Fill 3. I succeend to add that row, but when I get new divs then I wants to get new rows in the table on clicking add button in Fill 3. It added into wrong div.
can someone tell me what mistake I've done here?
var id = 0; //global id to create unique id
$(document).ready(function() {
//attach click event to element/button with id add and remove
$("#add,#remove").on('click', function() {
var currentElemID = $(this).attr('id'); //get the element clicked
if (currentElemID == "add") { //if it is add elem
var cloneParent = $("#dataTes").clone(); //clone the dataTes element
id=$("div[id^=dataTes]").length + 1;//get the count of dataTes element
//it will be always more than last count each time
cloneParent.find('[id]').each(function() {
//loop through each element which has id attribute in cloned set and replace them
//with incremented value
var $el = $(this); //get the element
$el.attr('id', $el.attr('id') + id);
//ids would now be add1,add2 etc.,
});
cloneParent.attr('id', cloneParent.attr('id') + id);//replace cloneParent id
cloneParent.appendTo('#result');//append the element to fieldset
$("#remove").show();//show remove button only if there is more than one dataTes element
} else {
$("div[id^=dataTes]:last").remove();
//just remove the last dataTes
//[id^=dataTes]:last annotates remove last div whose id begins with dataTes
//remember we have id like dataTes1,dataTes2 etc
if($("div[id^=dataTes]").length==1){
//check if only one element is present
$("#remove").hide();//if yes hide the remove button
}
}
});
});
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount > 1) {
table.deleteRow(rowCount - 1);
}
else {
alert("Tidak dapat menghapus semua baris!");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="result">
<legend>Test</legend>
<input type="submit" class="button" id="add" value="+" title="#">
<input type="submit" class="button" id="remove" value="-" style="display:none;" title="#">
<!--hide the remove button with display:none initially-->
<div id="dataTes">
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
<tr>
<td width="100px">Test</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill 1</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<tr>
<td width="2px"></td>
<td width="100px">Fill 2</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<table id="dataIP" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill 3</td>
<td width="2px">:</td>
<td width="2px">
<input type="text" name="usrname">
</td>
<td>
<input type="submit" class="button" value="+" onClick="addRow('dataIP')" title = "#">
<input type="submit" class="button" value="-" onClick="deleteRow('dataIP')" title = "#">
</td>
</tr>
</table>
</table>
</table>
</div>
</fieldset>
Thanks in advance!

<table id="dataIP" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill 3</td>
<td width="2px">:</td>
<td width="2px">
<input type="text" name="usrname">
</td>
<td>
<input type="submit" class="button" value="+" onClick="addRow('dataIP')" title = "#">
<input type="submit" class="button" value="-" onClick="deleteRow('dataIP')" title = "#">
</td>
</tr>
</table>`
so what will we do here is that we will change addRow(this) instead of addRow('dataIp') because we know that "this" keyword has a high priority in terms of passing the ID of the element .. the "this" keyword has a general purpose vs passing of id into a function .. just try changing all parameter to the "this".

function addRow(tableID) {
var par = tableID.parentNode.parentNode.parentNode.id;
var table = document.getElementById(par);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
this is what ive done when I change the parameter of the add and delete function in your input i get the param parent node the element for the purpose of specific element inside the parent element...
}

by the way.. you must change your third index table to tbody. the result of getting the parentnode will be a tbody. because putting table inside a table is redundant window read it as tbody
we must follow the rule
<table>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

How to get value of checkbox in table?

How can I get value of checkbox in table? I want use it for in this case in order get parameter. Now, please see html table:
<table id="div_func" class="table table-bordered" style="width: 100%">
<thead>
<tr>
<th>
<input type="checkbox" id="chk_all" /></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D01" /></td>
<td>Banana </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D02" /></td>
<td>Orange </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D03" /></td>
<td>Apple </td>
</tr>
</tbody>
</table>
And this is my script , I use for get value in checkbox , then put parameter
function add_funcgroup() {
var func_group = [];
var chk_allow = "";
var table = document.getElementById("div_func");
for (var i = 0; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
chk_allow = "True";
}
else {
chk_allow = "False";
}
var group_func = {
GROUP_MOD_ID: id_temp,
FUNCTION_MOD_ID: $('#chk')[i].val(),
ALLOW: chk_allow
};
func_group[i] = group_func;
}
var func_group_temp = {
FUNC_MOD: func_group
};
var DTO = {
'func_group_temp': func_group_temp
};
$.ajax(
{
And it's not working.

What you have done is right, but you are not outputting it to the table!
var table = $("#div_func");
var value_check = "";
for (var i = 1; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
value_check += i + ": " + $('#chk')[i].val();
}
}
alert(value_check);
And you aren't appending it, instead saving!

Try to this
$('#div_func tbody tr input:checkbox').each(function() {
if (this.checked) {
//Do something
}
});.

javascript clone a tree of elements and change all the IDs in the clone

i created a button that allows you to clone a tree of elements. This is my code:
function add_party(number) {
var n = number.replace("party", "");
var newparty = document.getElementById("party"+n);
var div = document.createElement("div");
var con = document.getElementById("party1").innerHTML;
document.createElement("div");
div.id = 'party' + ++n;
div.innerHTML = con;
newparty.parentNode.insertBefore(div, newparty.nextSibling);
renumberDivs(div, n, "div","party");
}
This is my HTML:
<div id="party1">
<h1>Party 1</h1>
<table>
<tbody>
<tr>
<th>party name：</th>
<td><input type="text" name="name1" value="some name"></td>
</tr>
<tr>
<th>party time：</th>
<td><input type="text" name="time1" value="some time"></td>
</tr>
</tbody>
</table>
<input type="button" onclick="add_party(this.parentNode.id)" value="add party">
</div>
However, since each element has an unique ID or name the clone should not have the same IDs or names. Instead the new IDs and names should add up by 1. So the cloned tree should look like this:
<div id="party2">
<h1>Party 2</h1>
<table>
<tbody>
<tr>
<th>party name：</th>
<td><input type="text" name="name2" value=""></td>
</tr>
<tr>
<th>party time：</th>
<td><input type="text" name="time2" value=""></td>
</tr>
</tbody>
</table>
<input type="button" onclick="add_party(this.parentNode.id)" value="add party">
</div>
Also, the input values should be empty for the clone. How can i do it with javascript? (no jQuery please).
Thank you.
EDIT:
this code updates the count numbers so they always appear in order:
function renumberDivs(el, n, tagn, ass) {
while (el = el.nextSibling) {
if (el.tagName && el.tagName.toLowerCase() == tagn){
el.id = ass + ++n;
}
}
}

Generally, this solution is a 2-step process:
manipulate existing parties one by one from the last to the insert point.
insert new party to the insert point.
function add_party(divId) {
var party = document.getElementById(divId);
var newParty = party.cloneNode(true);
var allParties = document.querySelectorAll('div[id^="party"]');
var newId = parseInt(divId.replace('party', ''), 10) + 1;
for(var i = allParties.length-1; i > newId-2; i--) {
allParties[i].setAttribute('id', 'party' + (i+2));
allParties[i].querySelector('h1').innerHTML = 'Party ' + (i+2);
var partyInputs = allParties[i].querySelectorAll('input[type="text"]');
for(var j = 0; j < partyInputs.length; j++) {
var prefix = partyInputs[j].getAttribute("name").replace(/\d+/, "");
partyInputs[j].setAttribute("name", prefix + (i+2));
}
}
newParty.setAttribute('id', 'party' + newId);
newParty.querySelector('h1').innerHTML = 'Party ' + newId;
var inputs = newParty.querySelectorAll('input[type="text"]');
for(var i = 0; i < inputs.length; i++) {
var prefix = inputs[i].getAttribute("name").replace(/\d+/, "");
inputs[i].setAttribute("name", prefix + newId);
inputs[i].setAttribute("value", "");
inputs[i].value = "";
}
party.parentNode.insertBefore(newParty, party.nextSibling);
}
<div id="party1">
<h1>Party 1</h1>
<table>
<tbody>
<tr>
<th>party name：</th>
<td><input type="text" name="name1" value="some name"></td>
</tr>
<tr>
<th>party time：</th>
<td><input type="text" name="time1" value="some time"></td>
</tr>
</tbody>
</table>
<input type="button" onclick="add_party(this.parentNode.id)" value="add party">
</div>

you'd better attach event to element using addEventListener. I found it works fun. Please refer to DEMO..., but there is a question, for the new generated form, there is no event handler attached, so you should attach new event handler for new generated form. if you can use jQuery or some others, you can use function like Delegate that bind event handler automatically

Cannot extract data from TD if there is span in front

I need your help.
Because of the way IE7 chooses to ignore the TD: whitespace: nowrap, I am forced to put and use spans in front of my TD's so here's the delema. When I click on a table row that has no spans in between the td's, the coding is able to extract the data and highlight the row.
However, when I introduce a span in between my td's and click to select a single cell in the table row with the spans's I get the following error: "cells.0 is null or not an object." I know that if I click a little bit off the side of the table cell it works, but I need to be able to also click on the <TD> and <SPAN> areas and have the code work.
Since I am making a table that will have all <span></span>'s in between all the <TD>'s how can the existing coding be reformatted to accomodate the difference from <td>data</td> to <td><span>data</span></td>?
No jQuery please.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
color: #235A81;
background-color: white;
}
#data tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
getdata(row)
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
return GoTo('data', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
return GoTo('data', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
getdata(trs[nu]);
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
function getdata(row) {
document.getElementById('firstname').value = row.cells[0].innerHTML;
document.getElementById('lastname').value = row.cells[1].innerHTML;
document.getElementById('age').value = row.cells[2].innerHTML;
document.getElementById('total').value = row.cells[3].innerHTML;
document.getElementById('discount').value = row.cells[4].innerHTML;
document.getElementById('diff').value = row.cells[5].innerHTML;
find_option('fname',row.cells[0].innerHTML)
}
}//end of nested function
function find_option(id,value) {
var sel = document.getElementById(id)
for (var i = 0; i < sel.length; i++){
//alert(sel.options[i].text+" "+sel.options[i].value)
if (sel.options[i].value == value) {
sel.selectedIndex = i;
return
}
}
}
</script>
</head>
<body>
<table id="data" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>peter</span></td>
<td><span>parker</span></td>
<td><span>28</span></td>
<td><span>9.99</span></td>
<td><span>20.3%</span></td>
<td><span>+3</span></td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>benjamin</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
<br><br>
<select id="fname">
<option value="bruce">bruce</option>
<option value="clark">clark</option>
<option value="benjamin">benjamin</option>
</select>
</body>
</html>

Change this line:
var row = td.parentNode;
to:
var row = (td.tagName == "DIV") ? td.parentNode.parentNode : td.parentNode;

You can look at the elemet's tag name and determine whether the user has clicked on a TD or a SPAN, then adjust select the element's parent (the TD) if you have a span.
var td = e.target || e.srcElement
alert(td.tagName)
Alternately, you can add a CSS class name to all of your SPANS and then check to see if the selected element has that class name. If it does, it's a SPAN, if it doesn't, it's a TD.
I would also suggest using a DIV, not a SPAN.