So at the moment I'm trying to add a new tr to a table that I already have, and while doing so, trying to update the rowspan of the previous tr, but I'm not getting it, so I'm not sure how to approach this problem. Here's what I've been trying to do (and what I am trying to achieve):
So here's a picture of the table that I have at the moment:
Now, when I am pressing "Add Row" to "Javier", I get this (which is fine, because I'm adding the new row after the one I already have..For the moment):
If I press "Add Row" to "Palacios", I get this (which is wrong, because I'm trying to get the new row of "Palacios" after the "first" row of "Palacios").
Problem 1
So here is my first issue..I don't know why this is happening! Like my table should look like this if I want to add a new row of "Palacios", and not like in the third image.
Problem 2
As you can see in the fourth image, I have 4 rows (2 of Javier and 2 of Palacios), but what I would like to do is to change the "rowspan" of the first one, so while I'm adding more, I'm increasing the rowspan. For example, if I press "Add row" to "Javier", it should look like this:
And if I add another one, then the rowspan of Javier would be 3, and not 2...But I'm not sure how to approach any of these problems (or what I'm doing wrong in the first one)
Here's the code of that.
function AddRow(row) {
var x = document.getElementById('TablePlayers');
var i = row.parentNode.parentNode.rowIndex;
// // document.getElementById("test").rowSpan += 1;
var new_row = x.rows[i].cloneNode(true);
x.insertBefore(new_row, x.childNodes[i]);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
I would just reference the table row, no need to look up the index. Also you should be doing this from the tbody and not the table.
function AddRow(btn) {
var tbody = document.querySelector('#TablePlayers tbody');
var tr = btn.closest('tr');
var new_row = tr.cloneNode(true);
tbody.insertBefore(new_row, tr);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
And modern browsers you can use before() or after()
function AddRow(btn) {
var tr = btn.closest('tr');
var new_row = tr.cloneNode(true);
tr.after(new_row);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
Utilizing closest is much simpler (great suggestion, #epascarello). So I've taken that and added more onto the code which will expand the rowSpan property to get your desired result.
As you'll see, you want to remove the first cell of the newly-cloned row to make the rowSpan work properly.
Furthermore, to prevent bugs, we want to ensure we only select the MAIN row, which we do through a while loop.
function AddRow(btn) {
var tbody = document.querySelector('#TablePlayers tbody');
var tr = btn.closest('tr');
// Check if the row we're copying has all the cells
// to ensure we expand the correct row.
// IE: If a row only has 3 cells, when we know it doesn't have
// the first cell with `rowSpan`
while (tr.cells.length != 4){
tr = tr.previousSibling;
}
// Expand the rowSpan of the main TR
tr.cells[0].rowSpan+=1;
// Clone the TR and remove its first cell
var new_row = tr.cloneNode(true);
new_row.deleteCell(0);
// Inserts the new row AFTER the current one.
// Since JavaScript doesn't have `insertAfter`, we can
// use this trick to make it work. We're essentially
// inserting the new row BEFORE the NEXT SIBLING
tbody.insertBefore(new_row, tr.nextSibling);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<table id="TablePlayers" border="1">
<thead>
<td>Name</td>
<td>Number</td>
<td>Goals</td>
<td>Add Row</td>
</thead>
<tr>
<td>Javier</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
<tr>
<td>Palacios</td>
<td><input size=25 type="text" id="latbox" name="NUM[]"></td>
<td><input size=25 type="text" id="lngbox" name="GOALS[]"></td>
<td><input type="button" value="Add Row" onclick="AddRow(this)" /></td>
</tr>
</table>
</body>
</html>
Related
In the code below I am trying to pass all the marks entered by the user to another page for execution but only the value of the first mark entered in the table is send.Is there a way to send all the values of the marks entered rather than just the first value;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function send(){
var marks=document.getElementById("marks").value;
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function()
{
if(this.readyState==4 &&this.status==200)
{
document.getElementById("result").innerHTML=this.responseText;
}
};
xmlhttp.open('GET','mark.php?marks='+marks,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
</table>
<button onlick="send()" >submit</button>
<div id='result'><p></p><div>
</body>
</html>
If you remove the ID attributes from the number inputs you can obtain a reference to all of them using querySelectorAll with a suitable pattern. Once you have that nodelist reference you can iterate through to find the values and use as you need.
You should be able to process $_GET['marks'] in marks.php quite easily after that..
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function send(){
var marks=[];
/* Find all the input elements that are considered `marks` and assign their values to an array */
Array.from( document.querySelectorAll('input[type="number"]') ).forEach( input=>{
marks.push( input.value );
});
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function(){
if( this.readyState==4 &&this.status==200 ){
document.getElementById("result").innerHTML=this.responseText;
}
};
/* prepare the array.. could alternatively use JSON format */
xmlhttp.open( 'GET', 'mark.php?marks=[' + marks.join(',')+']' );
xmlhttp.send();
}
/* bind an event listener to the button */
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('button').addEventListener('click',send)
});
</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
</table>
<button>submit</button>
<div id='result'><p></p><div>
</body>
</html>
in the following code, pretend the two broken images are each dice that show anything from 0-9. that means that when you add their values they could show anything from 0-99 making them 100 sided.
In the table you need to be able to input probability values that add up to 100 when you combine each column. the third and fourth column are supposed to show which rolls you would need to get to have those numbers appear. there are examples when you run the code.
I'm having trouble actually getting the chart to work how I want it to, can someone code a quick function for me? I will put credit in my comments for the code.
<!--Daniel Woods-->
<!--CMPT 250 -->
<!-- Lab 4 -->
<!-- Nov 20, 2017-->
<doctype! html>
<html>
<body bgcolor="red" text="white">
<head>
<title>Wandering Monster Table</title>
</head>
<table style="width:100%">
<tr>
<th>Probablility Percentage</th>
<th>Encounter</th>
<th>Minimum roll</th>
<th>Maximum roll</th>
</tr>
<tr>
<td><input type="text" id="prob1" value=""></td>
<td><input type="text" id="encounter1" value=""></td>
<td>??</td>
<td>??</td>
</tr>
<tr>
<td><input type="text" id="prob2" value=""></td>
<td><input type="text" id="encounter2" value=""></td>
<td>25</td>
<td>29</td>
</tr>
<tr>
<td><input type="text" id="prob3" value=""></td>
<td><input type="text" id="encounter3" value=""></td>
<td>30</td>
<td>49</td>
</tr>
<tr>
<td><input type="text" id="prob4" value=""></td>
<td><input type="text" id="encounter4" value=""></td>
<td>50</td>
<td>99</td>
</tr>
</table>
<script> <!--Declares the possible variables-->
var side0=new Image()
side0.src="d10_0.png"
var side1=new Image()
side1.src="d10_1.png"
var side2=new Image()
side2.src="d10_2.png"
var side3=new Image()
side3.src="d10_3.png"
var side4=new Image()
side4.src="d10_4.png"
var side5=new Image()
side5.src="d10_5.png"
var side6=new Image()
side6.src="d10_6.png"
var side7=new Image()
side7.src="d10_7.png"
var side8=new Image()
side8.src="d10_8.png"
var side9=new Image()
side9.src="d10_9.png"
</script>
<center>
<h1>Wandering monster table</h1>
<img src="d10_0.png" name="die1">
<img src="d10_0.png" name="die2">
<form>
<input type="button" value="Click here to roll" onClick="roll()">
</form>
</center>
<script> <!--Randomly chooses a variable between 0 and 5-->
function roll(){
var random=Math.round(Math.random()*10)
document.images["die1"].src=eval("side"+random+".src")
var random2=Math.round(Math.random()*10)
document.images["die2"].src=eval("side"+random2+".src")
}
</script>
</body>
</html>
I have a table in in that table I have a button for adding new row .In that table I want to dynamically add new row when user will click the add row button. I but it is not working. The HTML and JQuery code is there in JSFiddle . Please suggest.
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" id="nmbox" /></td>
<td><input size=25 type="text" id="agbox" /></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addRow" value="Add " onclick="insRow()" /></td>
</tr>
</table>
var new_row1 = $('#mytable tr:last').clone();
$('#mytable').append(new_row1);
1) id selector mismatched $('#myTable tr:last'). caps T
2) id should be unique for each element .
function insRow(){
var new_row1 = $('#myTable tr:last').clone();
$('#myTable').append(new_row1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" /></td>
<td><input size=25 type="text" /></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" value="Add " onclick="insRow()" /></td>
</tr>
</table>
To add child elements into cloned one without jQuery:
clone = ElementTo.cloneNode();
while (ElementToBeCloned.firstChild){
clone.appendChild(ElementToBeCloned.lastChild);
}
I'm making a form in which I want to automate some calculations. The form contains a table with some inputs. The Javascript is below the form.
For a reason unknown to me, the calculation won't start or isn't performed correctly.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
</script>
</body>
</html>
The problem is your function is not being run when the input is changed.
It is possible to use the JS addEventListener function to run your code whenever the input value is changed like so:
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
Your original code with the event listener added in:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
</script>
</body>
</html>
I have used this website a lot for research etc and find it extremely useful.
I have been developing a little bit of code that will get a list of input id names and then add there values together using javascript/jquery.
This is what I have so far - it might be well off the mark as I am still a novice.
So far the code gets the names of the inputs fine. It also does the calculation fine but when I put the array into the "var fieldnames" the calculation stops working?
When I copy the array out (after putting it into an input) and pasting it into the "var fieldnames" it works fine.
The issue seems to be that the array doesnt pass over to the "var fieldnames" correctly??
Here is the code from the page - it puts the array into the inputs at the bottom for investigation purposes only but the calculation doesnt work unless you put the input names in manually!
Any help would be much appreciated.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head><body>
<script type="text/javascript" language="javascript">
function getTotal(oForm)
{
var arrayOfIDs = $('.myClass').map(function() { return this.id; }).get();
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
document.getElementById("sum").value = test;
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = [test];
document.getElementById("sum1").value = fieldnames;
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
<div id="listing">
<form>
<table>
<td>8065020</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay47" type="text" name="pay47" value="38.45"/></td>
</tr>
<tr>
<td>8065021</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay48" type="text" name="pay48" value="37.4"/></td>
</tr>
<tr>
<td>8065022</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay49" type="text" name="pay49" value="375"/></td>
</tr>
<tr>
<td>8065014</td>
<td>2012-04-04</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay50" name="pay50" value="06"/></td>
</tr>
<tr>
<td>8065015</td>
<td>2012-04-04</td>
<td>motorprotect</td>
<td><input type="text" class="myClass" id="pay51" name="pay51" value="01"/></td>
</tr>
<tr>
<td>8065011</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay52" name="pay52" value="55"/></td>
</tr>
<tr>
<td>8065012</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay53" name="pay53" value="56"/></td>
</tr>
<tr>
<td>1</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay54" name="pay54" value="56"/></td>
</tr>
<tr>
<td>2</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay55" name="pay55" value="52"/></td>
</tr>
<tr>
<td>3</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay56" name="pay56" value="53"/></td>
</tr>
<tr>
<td>4</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay57" name="pay57" value="55"/></td>
</tr>
<tr>
<td>8065001</td>
<td/>
<td>landlord</td>
<td><input type="text" class="myClass" id="pay58" name="pay58" value="5"/></td>
</tr>
<tr>
<td>8065002</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay59" name="pay59" value="59"/></td>
</tr>
<tr>
<td>8065003</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay60" name="pay60" value="5"/></td>
</tr>
<tr>
<td>8065004</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay61" name="pay61" value="5"/></td>
</tr>
<tr>
<td>8065005</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay62" name="pay62" value="5"/></td>
</tr>
<tr>
<td>8065006</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay63" name="pay63" value="64"/></td>
</tr>
<tr>
<td>8065008</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay64" name="pay64" value="5" /></td>
</tr>
<tr>
<td>8065010</td>
<td/>
<td>business-basic</td>
<td><input type="text" class="myClass" id="pay65" name="pay65" value="10" /></td>
</tr>
</table>
<input id="total" type="text" name="total" value="" readonly="readonly" />
<input type="button" value="Get Total" onclick="total.value=getTotal(this.form)" />
<br /><br />
<input name="totalpay" id="sum" type="text" />sum<br />
<input name="totalpay" id="sum1" type="text" />sum1
</form>
</div>
</body>
</html>
1- Replace the line
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
By
var test = (arrayOfIDs.length ? arrayOfIDs.join(",") : "");
2- Replace
var fieldnames = [test];
By
var fieldnames = test.split(",");
3- Replace
field = els[fieldnames[i]];
By
field = document.getElementById(fieldnames[i]);
What i did here is only correct you code to resolve your problem, but i am covinced that you can do this in a more easiest way.
If I understood your question correctly and you just want to add up your values, while provideing basic validity check, your code is way to complicated. Frameworks like jQuery provide you with means to do this much simpler.
Instead of looping through all input elements, getting their id's and then looping through them again, just do it once.
var getTotal (oForm) {
var sum = 0;
// loop through all inputs with class "myClass" inside oForm
$("input.myClass", $(oForm)).each(function (index, value) {
// add up all values that are non empty and numeric
if (value !== "" && !isNaN(value)) {
// parse the value
sum += parseFloat(value, 10);
} else {
// show an alert, focus the input and return early from $.fn.each
alert("Please enter a valid number here!");
$(this).focus();
return false;
}
});
// set the value of
$("sum").val(sum);
}
This was written from the top of my head but should work fine.