Writing a single HTML file , design a table with five rows of four columns: firs
ID: 3850816 • Letter: W
Question
Writing a single HTML file, design a table with five rows of four columns: first column is a checkbox that the user can decide whether or not they want to select that row. The second, third, and fourth columns are some random, hard-coded name, telephone number, and address, respectively. There is then a 'submit' button for the user to click upon selecting their desired rows. Embedding JavaScript, take the information from the rows the user had selected, and display each column of information from the row the user had checked on another page. **Feel free to go about achieving this task however you want**
Explanation / Answer
First HTML (FirstPage.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript">
function onClickButton() {
var countIsdefineRowNo;
var nameCheckstr = document.getElementsByName("checkbox");
for(var i=0;i<nameCheckstr.length;i++)
{
if(nameCheckstr[i].checked)
{
countIsdefineRowNo = i;
break;
}
}
var name = document.getElementById("name_"+countIsdefineRowNo).value;
var telephone = document.getElementById("telephone_"+countIsdefineRowNo).value;
var address = document.getElementById("address_"+countIsdefineRowNo).value;
document.location.href = "SecondPage.html?name="+name+"&telephone="+telephone+"&address="+address;
}
</script>
<title>First Page</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td align="left">Name</td>
<td align="left">Telephone</td>
<td align="left">Address</td>
</tr>
<tr>
<td align="left"><input id="checkbox_0" name="checkbox" type="checkbox"></td>
<td align="left"><input id="name_0" type="text"></td>
<td align="left"><input id="telephone_0" type="tel"></td>
<td align="left"><input id="address_0" type="text"></td>
</tr>
<tr>
<td align="left"><input id="checkbox_1" name="checkbox" type="checkbox"></td>
<td align="left"><input id="name_1" type="text"></td>
<td align="left"><input id="telephone_1" type="tel"></td>
<td align="left"><input id="address_1" type="text"></td>
</tr>
<tr>
<td align="left"><input id="checkbox_2" name="checkbox" type="checkbox"></td>
<td align="left"><input id="name_2" type="text"></td>
<td align="left"><input id="telephone_2" type="tel"></td>
<td align="left"><input id="address_2" type="text"></td>
</tr>
<tr>
<td align="left"><input id="checkbox_3" name="checkbox" type="checkbox"></td>
<td align="left"><input id="name_3" type="text"></td>
<td align="left"><input id="telephone_3" type="tel"></td>
<td align="left"><input id="address_3" type="text"></td>
</tr>
<tr>
<td align="left"><input id="checkbox_4" name="checkbox" type="checkbox"></td>
<td align="left"><input id="name_4" type="text"></td>
<td align="left"><input id="telephone_4" type="tel"></td>
<td align="left"><input id="address_4" type="text"></td>
</tr>
<tr>
<td align="left"><input id="checkbox_5" name="checkbox" type="checkbox"></td>
<td align="left"><input id="name_5" type="text"></td>
<td align="left"><input id="telephone_5" type="tel"></td>
<td align="left"><input id="address_5" type="text"></td>
</tr>
</table>
<table>
<tr>
<td colspan="4" align="left"><input type="submit"></td>
</tr>
</table>
</body>
</html>
Second HTML (SecondPage.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('name').innerHTML = data.name;
document.getElementById('telephone').innerHTML = data.telephone;
document.getElementById('address').innerHTML = data.address;
}
</script>
<title>Second Page</title>
</head>
<body>
<table border="1">
<tr>
<td align="left">Name: <label id="name"></label></td>
</tr>
<tr>
<td align="left">Telephone: <label id="telephone"></label></td>
</tr>
<tr>
<td align="left">Address: <label id="address"></label></td>
</tr>
</table>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.