I my application "When a button is clicked it should create a new text field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.
<html>
<script type="text/javascript" language="javascript">
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"textfield\"";
newtd.innerHtml=output;
newtr.appendChild(newtd);
function create_row()
{
document.getElementById("table1").appendChild(newtr);
}
</script>
<body>
<table id="table1">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</table>
</body>
</html>
I am using IE7.
In order to make this work in IE you should create a TBODY first then append the TRs in TBODY. If you don't do this IE cannot render the table content, HTML part will be created succesffully but it will not be seen on the page.
So you should modify your script to append TRs into the TBODY
Few remarks about your code:
You need to properly close tags: var output="<input type=\"textfield\"" is not valid
There's no input type="textfield" defined
The property to set the html of a given DOM element is called innerHTML and not innerHtml
You need to create a new tr element every time the button is clicked, so this should be inside the create_row function
You have a typo in your HTML: <input type-"textfield" name="tfield">. This should be changed to <input type="text" name="tfield" />
You are missing a head section in your document
I've tried cleaning your code a bit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('table1').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</table>
</body>
</html>
UPDATE:
As pointed out by Guffa and Serkan answers in IE7 a tbody section needs to be used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('tablebody').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tbody id="tablebody">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
You are missing a head tag.
The script should be in the head tag.
The html code for the input element is missing a closing bracket.
The type "textfield" does not exist.
The code only works once as you create the elements outside the function.
The method is innerHTML, not innerHtml.
You have to add the row to the tbody element, not the table itself.
I have tested this in Firefox 3 and IE 8 and it works:
<html>
<head>
<script type="text/javascript">
function create_row() {
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"text\">";
newtd.innerHTML=output;
newtr.appendChild(newtd);
document.getElementById("table1body").appendChild(newtr);
}
</script>
</head>
<body>
<table>
<tbody id="table1body">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</tbody>
</table>
</body>
</html>
Related
I was able to display a block of text in a td after mouseover event, however I aim to reset, i.e display oringinal content of the td on mouseout/mouseleave the code i used is as follow. pls help
I get an undefined error when the code is run. i think the problem is seeting the event to element variable.
<html>
<head>
<title></title>
<script>
<!--
var content=new Array()
content[0]='Menus first'
content[1]='Menu Second'
content[2]='Menu Third'
function changetext(whichcontent){
document.getElementById("descriptions").innerHTML=whichcontent
}
function reset(){
if (!scriptmenu.contains(event.toElement))
descriptions.innerHTML=temphtml;
}
//-->
</script>
</head>
<body>
<table width="400" border="1">
<tbody>
<tr>
<td><div id="scriptmenu" onmouseleave="reset()">
<p><a href="index.html" onMouseover="changetext(content[0])" >Menu First</a><br>
Menu Second<br>
Menu Third<br>
</p>
</div></td>
<td><div id="descriptions" align="left">
<p><b>Welcome</b><br>
Enjoy!<br>
</div></td>
</tr>
</tbody>
</table>
<script language="JavaScript1.2">
if (document.all)
var temphtml=descriptions.innerHTML;
</script>
</body>
</html>
Try this example. add onmouseout with every onmouseover
Other change to focus on
var defaultData = document.getElementById("descriptions").innerHTML;
function reset(){
if (!scriptmenu.contains(event.toElement))
descriptions.innerHTML=defaultData;
}
<html>
<head>
<title></title>
<script>
<!--
var content=new Array()
content[0]='Menus first'
content[1]='Menu Second'
content[2]='Menu Third'
function changetext(whichcontent){
document.getElementById("descriptions").innerHTML=whichcontent
}
//-->
</script>
</head>
<body>
<table width="400" border="1">
<tbody>
<tr>
<td><div id="scriptmenu" >
<p>Menu First<br>
Menu Second<br>
Menu Third<br>
</p>
</div></td>
<td><div id="descriptions" align="left">
<p><b>Welcome</b><br>
Enjoy!<br>
</div></td>
</tr>
</tbody>
</table>
<script language="JavaScript1.2">
var defaultData = document.getElementById("descriptions").innerHTML;
function reset(){
if (!scriptmenu.contains(event.toElement))
descriptions.innerHTML=defaultData;
}
</script>
</body>
</html>
I'm trying to make a table, in which user can fill some cells with values and then click submit to show the calculation result. I have jquery-2.0.3.min.js and script.js in my directory. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Inteligence Decision Support System</title>
<script src='localhost/idss/jquery-2.0.3.min.js'></script>
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" type="text" value="0"></td>
<td><input name="a20" type="text" value=""></td>
<td><input name="a25" type="text" value=""></td>
</tr>
</table>
<input type="button" onclick="Zcount()" value="Submit" >
</body>
</html>
and here is the script.js file
<script type="text/javascript">
function Zcount(){
var cost, a20, a25;
a20 = document.getElementById("a20").value;
a25 = document.getElementById("a25").value;
cost = (2*parseInt(a20))+(3*parseInt(a25));
document.getElementById("Cost").value=cost;
}
</script>
but when I filled a20 and a25 and click the submit button, nothing happened. The result stayed zero. Where did I go wrong?
You have to check if the external javascripts are actually loaded. You can do this by right-clicking in he browser ind click "inspect element" in chrome or firefox. If you click "console" in these inspectors you can check if they are loaded. If they aren't, you have to adjust your src attribute in the HTML script element.
Also, you have to use the id attribute on the input's because you're using getElementById, and officially inputs have to be surrounded by a form element. So, in the body tag, your HTML will be like this:
<form id="form" action="#" method="post">
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" id="Cost" type="text" value="0"></td>
<td><input name="a20" id="a20" type="text" value=""></td>
<td><input name="a25" id="a25" type="text" value=""></td>
</tr>
</table>
<input type="submit" value="Submit" >
</form>
Inside the script.js, you don't have to use the HTML script tags.
Why are u including jquery if you don't use it?
But because you do, you can use this script:
$('form').submit(function(){
var cost, a20, a25;
a20 = $("#a20").val();
a25 = $("#a25").val();
cost = (2*parseInt(a20))+(3*parseInt(a25));
$("#Cost").val(cost);
return false;
});
Working jsFiddle: http://jsfiddle.net/jwvanveelen/ch2wR/
<!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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var wifi;
var firewall;
var backup;
var vpn;
var install;
$('submit').click(function(){
wifi = $('input[name=wifiPrice]').val();
firewall = $('input[name=firewallPrice]').val();
backup = $('input[name=backupPrice]').val();
vpn = $('input[name=vpnPrice]').val();
install = $('input[name=installPrice]').val();
$('list').append('<p>' + wifi + '</p>');
});
});
</script>
</head>
<body>
<div id="cccontainer">
<form id="costComparer" name="pricesForm">
<table>
<tr>
<td class="label" id="wifi">Wifi:</td><td><input type="text" name="wifiPrice"></td>
</tr>
<tr>
<td class="label" id="firewall">Firewall:</td><td><input type="text" name="fireWallPrice"></td>
</tr>
<tr>
<td class="label" id="backup">Backup:</td><td><input type="text" name="pBackupPrice"></td>
</tr>
<tr>
<td class="label" id="vpn">VPN:</td><td><input type="text" name="vpnPrice"></td>
</tr>
<tr>
<td class="label" id="install">Installation:</td><td><input type="text" name="installPrice"></td>
</tr>
<tr>
<td></td><td><input type="button" value="Submit" /></td>
</tr>
</table>
</form>
<div id="list"></div>
</div>
</body>
</html>
I am attempting to take in the value of the wifiPrice input field, and appending this in a container into <div id="list">. However, it doesn't seem to be doing anything. Could someone point out where I am going wrong? Thank you.
You're not referencing the div or the submit button correctly.
Change:
$('list').append('<p>' + wifi + '</p>');
To
$('#list').append('<p>' + wifi + '</p>');
Also, you have a problem with the way you attach the click listener. You need to either assign the button a class or id and then reference it accordingly. Alternatively you can reference it the way you reference your input fields.
$('submit')
You don't have a submit element?
<input type="button" value="Submit" />
would be
$('input[type="button"][value="Submit"]')
nor do you have a list element, $('list') should be $('#list')
FIDDLE
The problem is your selector. You're attaching an handler to an element (a tag) that should be called submit that doesn't exist! It's like you are selecting an element like:
<submit>...</submit>
So, turn this:
$('submit')
into this:
$('input[type="submit"]')
Note: this is meant to be a community wiki post
The following code using simple dom methods fails to add rows to the table. What's the issue?
<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
var mytable = document.getElementById('mytable');
var row = document.createElement('tr');
var cell = document.createElement('td');
var text = document.createTextNode('This is a row');
cell.appendChild(text);
row.appendChild(cell);
mytable.appendChild(row);
}
</script>
</head>
<body>
<form action="#">
<table id="mytable">
<tr>
<td>This is a row</td>
</tr>
</table>
<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
The issue at hand here is that the <table> element's correct structure is not present. When dealing with tables, the basic structure is:
<table>
<thead>
<tr>
<th>Heading for the table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A row of data</td>
</tr>
</tbody>
</table>
The logic is that when dealing with tables, you want to keep the labels of the columns, and the actual data separate. Because most browsers fill in the <tbody> as part of the process of fixing broken HTML, few people realize this. When the browser sees you adding a <tr>, it doesn't know if you're trying to add it to the <thead> or the <tbody>, so it fails.
The following shows the correct method for adding the rows:
<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell = document.createElement('td');
var text = document.createTextNode('This is a row');
cell.appendChild(text);
row.appendChild(cell);
mytbody.appendChild(row);
}
</script>
</head>
<body>
<form action="#">
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>This is a row</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
Any additional row needs to be added then take the first child of tableID and then use appendChild() method:
var tbl=document.getElementById("tbl");
var row=document.createElement("tr");
var cel=document.createElement("td");
cel.innerHTML='sometext';
row.appendChild(cel);
tbl.children[0].appendChild(row);
Consider:
File script.js,
function AdaugaComboBox(id, name){
var select_tag = document.getElementById(id);
select_tag.innerHTML += "<select name='"+name+"'><option value='0'>Selecteaza autor</option></select><br/>";
return true;
}
and file index.html:
<html>
<head>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button"
value="Adauga autor"
onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
The scope of the function is to add a combo box to the specific TD in the TABLE. But when I press the button this error appears:
AdaugaComboBox is not defined
Why?
Update:
!!! I've fixed it. The problem was with another function.
If the script is included in your HTML, then it's possible that you don't have the path correct based on the location of the HTML file. Check with Firefox/Firebug to make sure that the JS file is being downloaded correctly.
Your HTML should be:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button" value="Adauga autor" onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
You have to put a reference to the script.js file.
<script type="text/javascript" src="script.js"></script>