I'm having a few issues with my javascript webpage. My first question is how to create a small border that wraps around a title? The bottom portion of my professor's sample webpage looks like this: https://i.imgur.com/4DVozv9.png
The bottom portion of my webpage so far looks like this: https://i.imgur.com/8STmOGd.png
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
Also for some reason the "" tag on my "Complete Payment" button isn't placing my button on the next line for some reason. Here is my code so far, note though that it's incomplete so my functions and other features aren't ready yet, right now I'm just focusing purely on presentation. Thank you for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YOUR NAME Final Project Checkout</title>
<link href="layout.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="guest-functions.js"></script>
<script type="text/javascript" src="cart-functions.js"></script>
<script>
window.onload=function(){
setGuest();
updateCartTotal();
}
</script>
</head>
<body>
<header><img src="90s-Gamers-Logo.png" width="798" height="82" alt="My Company"/></header>
<nav>
<form id="form1" name="form1" method="post">
<p>Choose a page to visit:<br>
<select name="select" id="select" onchange="location = this.options[this.selectedIndex].value;">
<option value="index.html">Home</option>
<option value="shop.html">Shop</option>
<option value="cart.html">Cart</option>
<option value="checkout.html" selected="selected">Checkout</option>
</select>
</p><br>
<p><b>Welcome Guest!</b></p>
<p>Enter your name:</p>
<input id="sign-in-text"><br>
<button onclick="setGuest()" id="sign-in-button">Sign-In</button><br><br>
<p>Your shopping cart is now</p>
<!--Need variable here-->
<p><b>empty!</b></p>
</form>
<p> </p>
<div id="divGuestArea"> </div>
<p> </p>
<div id="divCartSummary"> </div>
</nav>
<div id="main">
<h1>Checkout</h1>
<!--<p>This is where the transaction would take place so create a form here to take care of that final process as appropriate. Such form fields as contact info, shipping method, payment method, receipt, etc. Use HTML attributes wisely to help with validation and write JavaScript to validate any needed fields that are not sure to be validated by this HTML.</p>
<p>Connect your form to a "thankyou.html" page that you create so that after the form is submitted and found to be filled out properly, you thank them by name on "thankyou.html".</p>-->
<table border="1" cellspacing="0" cellpadding="6" summary="Table of Quantity, Description, Price, and Product Totals">
<tbody>
<tr>
<td><b>Quantity</b></td>
<td><b>Description</b></td>
<td><b>Price</b></td>
<td><b>Product Total</b></td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Subtotal:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Tax:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3"><b>Grand total:</b></td>
<td><b>later</b></td>
</tr>
</tbody>
</table><br>
<p>Display total amount</p>
<p>Shipping Method</p>
<p> <input type="radio" name="ShipType" id="standard" value="2">
<label for="standard">Standard Shipping ($2)</label>
<input type="radio" name="ShipType" id="2-day" value="5">
<label for="2-day">2-Day Shipping ($5)</label>
<input type="radio" name="ShipType" id="overnight" value="10">
<label for="overnight">Overnight Shipping ($10)</label>
<br>
<p>Shipping Address</p>
Full Name:
<input type="text" id="FullName" name="FullName">
Street Address:
<input type="text" id="StreetAddress" name="StreetAddress"><br><br>
City:
<input type="text" id="City" name="City">
State/Province/Region:
<input type="text" id="State" name="State"><br><br>
ZIP:
<input type="text" id="Zip" name="Zip">
Country:
<input type="text" id="Country" name="Country"><br><br>
Phone Number:
<input type="text" id="PhoneNumber" name="PhoneNumber"><br>
<p>Payment Details</p>
<select id="selPayment" name="selPayment" onChange="getSelectValue();">
<option value="" selected="selected">- Choose one -</option>
<option value="Visa">Visa Credit</option>
<option value="MasterCard">MasterCard Credit</option>
<option value="American Express">American Express Credit</option>
<option value="Debit Card">Debit Card</option>
<option value="Pay Pal">Paypal</option>
</select> <br><br>
Card #:
<input type="text" id="CardNumber" name="CardNumber"><br><br>
Expiration Month:
<select id="selMonth" name="selMonth" onChange="getSelectMonth();">
<option value="" selected="selected">- Choose one -</option>
<option value="January">January</option>
<option value="February">Febraury</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select> <br><br>
Expiration Year:
<select id="selYear" name="selYear" onChange="getSelectYear();">
<option value="" selected="selected">- Choose one -</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<br><p>
<input type="button" value="Complete Payment"
onclick="storeAndGo();">
</p>
<footer>
Copyright 2020, 90's Gamers.
</footer>
</div>
</body>
</html>
You can add a div to your 3 sections, and you can set border to this.
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
CSS
border: 1px solid;
border-radius: 25px;
Related
> *** Dropdown Select-option Vehicle Type ***
<div class="col-md-8 col-sm-8">
<h5><strong> Select <c style="color: #880707;">Vehicle</c></strong></h5>
<select id="name" required>
<option value="selectVehicle">----- Select Vehicle -----</option>
<optgroup label="Pick-Up">
<option value="Light_Truck" id="option_1">Light Truck</option>
</optgroup>
<optgroup label="Van">
<option value="Van" id="option_2">Van (Manual)</option>
</optgroup>
<optgroup label="7-Seaters">
<option value="Innova_AT" id="option_3">Innova (AT)</option>
<option value="Innova_MT" id="option_4">Innova (Manual)</option>
<option value="Xpander" id="option_5">Mitsubishi Expander</option>
<option value="Suzuki_XL7" id="option_6">Suzuki XL7</option>
</optgroup>
<optgroup label="Sedan">
<option value="Vios" id="option_7">Toyota Vios</option>
<option value="Ciaz" id="option_8">Suzuki Ciaz</option>
<option value="Mirage_G4" id="option_9">Mirage G4</option>
</optgroup>
<optgroup label="Hatchback">
<option value="Mirage_GLS" id="option_10">Mirage GLS</option>
<option value="Wigo" id="option_11">Toyota Wigo</option>
</optgroup>
</select>
</div>
> *** Days-Weeks-Months Rental Duration Input ***
<div class="col-md-12 col-sm-12">
<h5><strong> Rental <c style="color: #880707;">Duration</c></strong></h5>
<fieldsets>
<input class="col-md-4" type="text" id="days" name="Days" pattern="\d*" placeholder="Days*"/>
<input class="col-md-4" type="text" id="weeks" name="Weeks" pattern="\d*" placeholder="Weeks*"/>
<input class="col-md-4" type="text" id="months" name="Months" pattern="\d*" placeholder="Months*"/>
</fieldsets>
</div>
> *** Total Cost Output ***
<div class="col-md-6 col-sm-12">
<h5><strong> Total <c style="color: #880707;">Cost</c></strong><sup> negotiable*</sup></h5>
<fieldset name="Total">
<output id="cost"> $ 0.00</output>
</fieldset>
</div>
The script works fine, it would calculate when selecting vehicles then inputting duration of rental, but vise versa it wont calculate, it stays on $ 0.00.
<script>
const rates={
option_1:[350,2200,5400],
option_2:[380,2400,6000],
option_3:[300,1800,4500],
option_4:[250,1700,4200],
option_5:[280,1680,4510],
option_6:[250,1690,4250],
option_7:[180,1200,3000],
option_8:[180,1200,3000],
option_9:[180,1200,3000],
option_10:[160,980,2500],
option_11:[160,980,2500]};
const D=[], cost=document.getElementById("cost");
document.querySelector("fieldsets").querySelectorAll("input").forEach(e=>{D.push(e);e.addEventListener("input",calc)});
document.querySelectorAll("option").forEach(e=>{e.addEventListener("click",calc)});
function calc(ev){
const prod=document.querySelector("option:checked"),
r=prod?rates[prod.id]:[0,0,0];
cost.textContent='$ '+ r.reduce((a,c,i)=>a+c*(D[i].value??0),0).toFixed(2);
}
</script>
When inputting rental duration before selecting vehicle type it stays on $ 0.00 and vise versa works fine but after click other option the output stays as is.
it seems you're missing a check for the option id before running the calc, so i added an if statement to use before running the reduce function,
if(prod.id){ ... //reduce function }
you can now try the snippet
const rates={
option_1:[350,2200,5400],
option_2:[380,2400,6000],
option_3:[300,1800,4500],
option_4:[250,1700,4200],
option_5:[280,1680,4510],
option_6:[250,1690,4250],
option_7:[180,1200,3000],
option_8:[180,1200,3000],
option_9:[180,1200,3000],
option_10:[160,980,2500],
option_11:[160,980,2500]};
const D=[], cost=document.getElementById("cost");
document.querySelector("fieldsets").querySelectorAll("input").forEach(e=>{D.push(e);e.addEventListener("input",calc)});
document.querySelectorAll("option").forEach(e=>{e.addEventListener("click",calc)});
function calc(ev){
const prod=document.querySelector("option:checked"),
r=prod?rates[prod.id]:[0,0,0];
if(prod.id){
cost.textContent='₱ '+ r.reduce((a,c,i)=>a+c*(D[i].value??0),0).toFixed(2);
}
}
> *** Dropdown Select-option Vehicle Type ***
<div class="col-md-8 col-sm-8">
<h5><strong> Select <c style="color: #880707;">Vehicle</c></strong></h5>
<select id="name" required>
<option value="selectVehicle">----- Select Vehicle -----</option>
<optgroup label="Pick-Up">
<option value="Light_Truck" id="option_1">Light Truck</option>
</optgroup>
<optgroup label="Van">
<option value="Van" id="option_2">Van (Manual)</option>
</optgroup>
<optgroup label="7-Seaters">
<option value="Innova_AT" id="option_3">Innova (AT)</option>
<option value="Innova_MT" id="option_4">Innova (Manual)</option>
<option value="Xpander" id="option_5">Mitsubishi Expander</option>
<option value="Suzuki_XL7" id="option_6">Suzuki XL7</option>
</optgroup>
<optgroup label="Sedan">
<option value="Vios" id="option_7">Toyota Vios</option>
<option value="Ciaz" id="option_8">Suzuki Ciaz</option>
<option value="Mirage_G4" id="option_9">Mirage G4</option>
</optgroup>
<optgroup label="Hatchback">
<option value="Mirage_GLS" id="option_10">Mirage GLS</option>
<option value="Wigo" id="option_11">Toyota Wigo</option>
</optgroup>
</select>
</div>
> *** Days-Weeks-Months Rental Duration Input ***
<div class="col-md-12 col-sm-12">
<h5><strong> Rental <c style="color: #880707;">Duration</c></strong></h5>
<fieldsets>
<input class="col-md-4" type="text" id="days" name="Days" pattern="\d*" placeholder="Days*"/>
<input class="col-md-4" type="text" id="weeks" name="Weeks" pattern="\d*" placeholder="Weeks*"/>
<input class="col-md-4" type="text" id="months" name="Months" pattern="\d*" placeholder="Months*"/>
</fieldsets>
</div>
> *** Total Cost Output ***
<div class="col-md-6 col-sm-12">
<h5><strong> Total <c style="color: #880707;">Cost</c></strong><sup> negotiable*</sup></h5>
<fieldset name="Total">
<output id="cost"> ₱ 0.00</output>
</fieldset>
</div>
enter image description hereI have to create "View" and "Update" radio buttons with a dropdown below each one. To do this, I've written the following code:
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<input type='radio' id='byState' ; style="margin-left:180px" ; value='View' name='byState'>View by Student's unique identity number
<input type='radio' id='byClub' ; style="margin-left:80px" ; value='Update' name='byClub'>Update by Student's identity number
<table>
<tr>
<td>
<div style="width:200px;text-align: left; display: inline;">
<select id="Select" ;>
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
However, I'm unable to place the drop-down menu below radio buttons; this is what I get instead:
enter image description here
Using CSS:
.container {
width: 100%;
}
.container,
.radio-buttons,
.radio-buttons>span,
.dropdowns {
}
.cell {
display: inline-block;
width: calc(50% - 2px);
}
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<div class="container">
<div class="radio-buttons">
<div class="cell">
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</div>
<div class="cell">
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number </div>
</div>
<div class="dropdowns">
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</div>
</div>
Using Tables:
You can use a table to align items together like so:
td {
width: 50vw;
}
<div class="pageHead" align="center">Auto Loan Basis Point (Bps) Adjustments by State</div> <br><br>
<table>
<tr>
<td>
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</td>
<td>
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number
</td>
</tr>
<tr>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
I ran into an issue where I have two forms on a page -
A desktop version of the form
A mobile version.
Both forms don't show to the user as it depends on their viewport or device. When the user selects "Student Loan" from the agency drop-down selection (in either form), we want the form submission's action to be /quote/quotes-sl.php instead of the form default of /quote/quotes.php.
The good news is that on the mobile-friendly form (the first form in the code below), the solution works. However, for the desktop form, it does not even though it has the same form id/name. I tried renaming the desktop form to have a different formID/name` and then add another script for that form, but that doesn't work.
Any direction or advice is greatly appreciated.
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<div>
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test" />
<div id="edit-owed-wrapper" class="form-item">
<label class="edit-owed" for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$30,000 to $39,999">$30,000 to $39,999</option>
<option value="$40,000 to $59,999">$40,000 to $59,999</option>
<option value="$60,000 to $79,999">$60,000 to $79,999</option>
<option value="$80,000 to $99,999">$80,000 to $99,999</option>
<option value="$100,000+">$100,000 +</option>
</select>
</div>
<div id="edit-agency-wrapper" class="form-item">
<label class="edit-agency" for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label>
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="Federal" data-action="/quote/quotes.php">Federal</option>
<option value="STATE" data-action="/quote/quotes.php">State</option>
<option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option>
</select>
</div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="http://www.test.com/wp-content/uploads/2009/07/form-submit-6-17-small.png" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</div>
</form>
<div class="mycustombanner desk-view">
<img class="wp-image-12546 size-full alignnone" src="http://www.test.com/wp-content/uploads/2009/12/top-form-irs-hardship-status.png" alt="irs hardship status" width="618" height="194" />
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-2-form">
<div>
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test-desktop" />
<div id="edit-owed-wrapper" class="form-item">
<label for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$30,000 to $39,999">$30,000 to $39,999</option>
<option value="$40,000 to $59,999">$40,000 to $59,999</option>
<option value="$60,000 to $79,999">$60,000 to $79,999</option>
<option value="$80,000 to $99,999">$80,000 to $99,999</option>
<option value="$100,000+">$100,000 +</option>
</select>
</div>
<div id="edit-agency-wrapper" class="form-item">
<label for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label>
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="Federal" data-action="/quote/quotes.php">Federal</option>
<option value="STATE" data-action="/quote/quotes.php">State</option>
<option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option>
</select>
</div>
<input id="edit-submit" class="form-submit" height="37" name="submit" src="http://www.test.com/wp-content/uploads/2010/04/form-submit-6-17-1.png" type="image" value="Submit" width="207" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
</div>
It is invalid HTML to have more than one element with the same ID in one document - that's why the selector is failing.
Try giving both forms different IDs, as well as for the select element, for example:
<form id="tdhcustom-pre-1-form1"...
<select id="agency1"...
...
...
<form id="tdhcustom-pre-1-form2"...
<select id="agency2"...
Then you could do:
[
['tdhcustom-pre-1-form1', 'agency1'],
['tdhcustom-pre-1-form2', 'agency2'],
].forEach(([formSelector, agencySelector]) => {
const form = document.getElementById(formSelector);
const agency = document.getElementById(agencySelector);
agency.addEventListener('change', () => {
form.action = agency[agency.selectedIndex].getAttribute('data-action');
});
});
Now that I've looked at your code more, I'm going to say more confidently that sharing the same id between your forms is the problem you're having. This line:
var theForm = document.getElementById('tdhcustom-pre-1-form');
...isn't going to care which form is hidden, and which form is shown. It's always going to return you the same form. Your browser must be favoring the mobile form over the desktop form.
How to make the the text box and the the form fields to align in same line...
i gave display inline but its not working...
providing my code below....
how to fix it...
text field is one line below the buttons....
http://jsfiddle.net/S9PYV/embedded/result/
<div class="bs-docs-example" id="notesDocumentsOuterDF">
<div class="documents-make-container">
<!--<div class="insert-items-container">
<label for="idName">Name</label>
<input id="idName" type="text" name="name" value="" required="required" />
</div>-->
<div class="insert-items-container">
<select class="greenButton">
<option value="volvo">Create</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="greenButton">
<option value="volvo">Email|Access</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" class="greenButton" value="Add Contacts">
</div>
<div class="insert-items-container" style="float: right;">
<!--<label for="idImageUpload">Image</label>-->
<input type="file" name="file" id="idImageUpload" class="file" size="40">
<div id="fakefile" class="fakefile">
<input type="text" class="fakeinput">
<img src="/images/icons/search.png">
</div>
</div>
<!--<div class="insert-items-container">
<label for="idContactSel">Contacts List</label>
<select id="idContactSel" name="contactselect">
<option value="">select email to share </option>
</select>
<input id="shareListBtn" class="greenButton" type="button" value="Share List" alt="sharelist">
<input id="contactListBtn" class="greenButton" type="button" value="Contacts List" alt="contactlist">
<input id="AddContactBtn" class="greenButton" type="button" value="Add Contacts" alt="addcontacts">
</div>-->
<!--<div class="insert-items-container">
<label for="idShareList">Share List</label>
<div id="idShareList" class="email-selected-container">
<table cellspacing="0" cellpadding="0" border="0" class="table">
<thead>
<tr class="documentsListHeading" role="row">
<th width="100px;">name</th>
<th width="180px;">Email</th>
<th>Permission</th>
</tr>
</thead>
<!-- share list -->
</div>
</div>
Your first insert-items-container has 100% width (as default divs do) so it's filling the whole line. You can solve this either by putting the text box in the same insert-items-container with the other form fields, or by setting all insert-items-containers to float: left
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.