HTML DOM/Java Help In my assignment, I am working with DOM and Java, as well as
ID: 3821456 • Letter: H
Question
HTML DOM/Java Help
In my assignment, I am working with DOM and Java, as well as tables. The page I have works the only thing I need help on is the addData function
located toward the bottom, it should add another set of data into the table but it does not and I don't know why. Help is appreciated
comments not required but helpful.
///////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../images/week2-2favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/homework.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../pages/week5-1.html">Week5-1</a>
<a class="navbar-brand" href="../pages/week5-2.html">Week5-2</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<!--<h1>New Sale Items Now Available</h1>-->
<table id="productTable" border="1">
<!--<thead>
<tr>
<th class="prodname">Product Name</th>
<th class="prodmake" colspan="3">Manufacturer, Make, Model </th>
<th class="prodconditon">Condition(new or used) </th>
<th class="description" colspan="2">Description </th>
<th class="retail">Retail price </th>
<th class="rumprice">Rummage Price </th>
<th class="pic" colspan="2">Picture </th>
</tr>
</thead> -->
<tbody id="productbody">
<tr class="pens">
<th>Pens</th><td><img src="../images/like.jpg" alt="like" /></td><td>PenMaker Co. Model 3</td><td>New</td><td colspan="2">black ink pen</td><td class="retailprice">$4</td><td>$2</td><td><a href="../images/product1.jpg" target="_blank">
<img src="../images/product1sm.jpg" alt="Pen" />
</a></td>
</tr>
<tr class="shirts">
<th>Shirts</th><td><img src="../images/like.jpg" alt="like"></td><td>HappyShirt Inc., T-shirt</td><td>Used</td><td colspan="2"> A T-shirt</td><td class="retailprice">$10</td><td>$5</td><td><a href="../images/product2sm.jpg" target=“_blank”>
<img src="../images/product2.jpg" alt="Shirts" />
</a></td>
</tr>
<tr>
<th class="phones">Phone Cases</th><td><img src="../images/like.jpg" alt="like"></td><td>Safe Phone, Iphone, Galaxy</td><td>Used</td><td colspan="2">Cases for your phone</td><td class="retailprice">$15</td><td>$10</td><td><a href="../images/product3.jpg" target="_blank">
<img src="../images/product3sm.jpg" alt="cases" />
</a></td>
</tr>
<tr>
<th class="tooth">ToothBrushes</th><td><img src="../images/like.jpg" alt="like"></td><td>Crazy Teeth, Soft & Hard</td><td>New</td><td colspan="2">Essential Brushes</td><td class="retailprice">$3</td><td>$1</td><td><a href="../images/product4.jpg" target="_blank">
<img src="../images/product4sm.jpg" alt="ToothBrush" />
</a></td>
</tr>
<tr>
<th class="gloves">Gloves</th><td><img src="../images/like.jpg" alt="like"></td><td>WoolieMitt, Mittens</td><td>New</td><td colspan="2">Mittens for winter</td><td class="retailprice">$8</td><td>$5</td><td><a href="../images/product5.jpg" target="_blank">
<img src="../images/product5sm.jpg" alt="Mittens" />
</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script>
function init() {
createHeader();
createFooter();
createCaption();
addData();
}
//footer
function createFooter() {
var aTable = document.getElementById("productTable");
var aTFoot = document.createElement("tfoot");
aTable.appendChild(aTFoot);
var aRow = document.createElement("tr");
aRow.id = "prodFooterRow";
aTFoot.appendChild(aRow);
aTFoot.className = "productFoot";
var aCell = document.createElement("td");
aRow.appendChild(aCell);
aCell.colSpan = "11";
aCell.innerHTML = "All Sales are Final.";
} // end footer
//captiom
function createCaption() {
var aTable = document.getElementById("productTable");
var aCaption = document.createElement("caption");
aCaption.innerHTML = "We have new products available";
aCaption.stlye.fontSize = "14px";
aCaption.style.align = "top";
aTable.appendChild(aCaption);
}//end caption
//header
function createHeader() {
var aTable = document.getElementById("productTable");
var aTHead = document.createElement("thead");
aTable.appendChild(aTHead);
aTable.border = "10";
aTable.bgColor = "lightslategray";
aTable.width = "960";
aTable.summary = "This product list shows what is available at our rummage sale!";
aTHead.id = "productHead";
aTHead.className = "productHead";
var aRow = document.createElement("tr");
aRow.id = "prodHeaderRow";
aTHead.appendChild(aRow);
var heading = new Array();
heading[0] = "buy";
heading[1] = "like";
heading[2] = "Product Name"; // need to expand the column here, not sure how
heading[3] = "Condition";
heading[4] = "Description";
heading[5] = "Description";
heading[6] = "Retail price";
heading[7] = "Sale price";
heading[8] = "Thumbnail pic";
for (var i=0; i<heading.length; i++)
{
var aCell = document.createElement("th");
aCell.innerHTML = heading[i];
aRow.appendChild(aCell);
}
}//end header
//add Data
function addData() { // This does not add Data for an ice cream Scooper
var aTable = document.getElementById("productTable");
var aTbody = document.getElementById("productBody");
var cellData = new Array();
cellData[0] = '<input type="image" name="btnScoop" '
+ 'id="btnScoop" src="../images/scooper.jpg" value="789" />';
cellData[1] = '<input type="image" name="btnlike" id="btnlike" src="../images/like.jpg"/ >';
cellData[2] = '<a href="product.html?productid=789">Ice Cream Scooper </a>';
cellData[3] = "Premium Scooper";
cellData[4] = "Used";
cellData[5] = "Color: Metal.";
cellData[6] = "$10";
cellData[7] = "$4";
cellData[8] = '<a href="../images/scooper.jpg" target="_blank">' +
'<img class="prodthumb" src="../images/scooper.jpg" alt="product" /></a>';
cellData[9] = "789";
var aRow = document.createElement("tr");
aRow.id = "row" + cellData[9];
aRow.className = "prodrow";
aTbody.appendChild(aRow);
for (var i=0; i < cellData.length-1; i++)
{
var aCell = document.createElement("td");
aCell.innerHTML = cellData[i];
if (i == 6) {
aCell.className = "prodprice";
}
if (i == 8) {
aCell.className = "prodpics";
}
aRow.appendChild(aCell);
} // end for
} // end addData
</script>
</body>
</html removed the '>' because it messes with the pasting in chegg
Explanation / Answer
aRow is inside the function. That can be a problem.
Every time when you call the function, a new aRow is created .
instead declare it outside the function.
So that it will be created only once.
and the child will be appended to it everytime the function is called.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.