How to hide and show table that is populated via a form
Question
Below is a form when submitted displays the content in a table.
What works Content is successfully transferred via form to table.
What is not working
I wanted to hide the table when the page loads and be displayed only after the form is submitted.
I tried
#myTableData {visibility: hidden;}in css and then I tried plugging(.style.visibility="visible";)Javascript in my addtable function to display the table but it does not work. I am not sure if I am understanding this right.Also how do I control the display of the table (like width, background color, font etc). I added (td.style.width = '200px'; but I don't see any changes).
CSS or JS for controlling table ?
function addTable() { var table = document.createElement('TABLE').style.display = "block"; table.border='0'; for (var i=0; i<3; i++){ var tr = document.createElement('tr'); for (var j=0; j<4; j++){ var td = document.createElement('td'); td.style.width = '200px'; td.appendChild(document.createTextNode("Cell " + i + "," + j)); tr.appendChild(td); } } } function addRow() { var myName = document.getElementById("name"); var domainName = document.getElementById("domain"); var url = document.getElementById("url"); var table = document.getElementById("myTableData"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); //row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">'; row.insertCell(0).innerHTML= myName.value; row.insertCell(1).innerHTML= domainName.value; row.insertCell(2).innerHTML= url.value; } function load() { console.log("Check if this loads"); } /* function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("myTableData"); table.deleteRow(index); } */
#myTableData {visibility: hidden;} body { background: gray; }
<!DOCTYPE html> <html> <head> <title>HTML dynamic table using JavaScript</title> <script type="text/javascript" src="table-app.js"></script> <link rel="stylesheet" href="table-app.css"> </head> <body onload="load()"> <div id="myform"> <b>Simple form with name and age ...</b> <table> <tr> <td>Name</td> <td><input type="text" id="name"></td> </tr> <tr> <td>Domain</td> <td><input type="text" id="domain"> </td> </tr> <tr> <td>URL</td> <td><input type="text" id="url"></td> </tr> <tr> <td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td> </tr> </table> </div> <table id="myTableData" border="1" cellpadding="2"> <tr> <th>Name</td> <th>Domain</th> <th>URL</th> </tr> </table> </div> <!-- <div id="myDynamicTable"> <input type="button" id="create" value="Click here" onclick="Javascript:addTable()"> to create a Table and add some data using JavaScript </div> --> </body> </html>
2 answers
solution1
0 ACCPTED 2015-03-23 17:59:44
1) In function addRow add table.style.visibility = "visible"; ,to display the table, right after var table = document.getElementById("myTableData"); .
2) To set styles like width you can can use setAttribute method.
document.getElementById('myTableData').setAttribute("style","width:200px");
Note: I can't see where you make use of addTable function, maybe this is why some of styles are not setted when you want.
function addTable() { var table = document.createElement('TABLE').style.display = "block"; table.border='0'; for (var i=0; i<3; i++){ var tr = document.createElement('tr'); for (var j=0; j<4; j++){ var td = document.createElement('td'); td.style.width = '200px'; td.appendChild(document.createTextNode("Cell " + i + "," + j)); tr.appendChild(td); } } } function addRow() { var myName = document.getElementById("name"); var domainName = document.getElementById("domain"); var url = document.getElementById("url"); var table = document.getElementById("myTableData"); table.style.visibility = "visible"; var rowCount = table.rows.length; var row = table.insertRow(rowCount); //row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">'; row.insertCell(0).innerHTML= myName.value; row.insertCell(1).innerHTML= domainName.value; row.insertCell(2).innerHTML= url.value; } function load() { console.log("Check if this loads"); } /* function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("myTableData"); table.deleteRow(index); } */
#myTableData {visibility: hidden;} body { background: gray; }
<!DOCTYPE html> <html> <head> <title>HTML dynamic table using JavaScript</title> <script type="text/javascript" src="table-app.js"></script> <link rel="stylesheet" href="table-app.css"> </head> <body onload="load()"> <div id="myform"> <b>Simple form with name and age ...</b> <table> <tr> <td>Name</td> <td><input type="text" id="name"></td> </tr> <tr> <td>Domain</td> <td><input type="text" id="domain"> </td> </tr> <tr> <td>URL</td> <td><input type="text" id="url"></td> </tr> <tr> <td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td> </tr> </table> </div> <table id="myTableData" border="1" cellpadding="2"> <tr> <th>Name</td> <th>Domain</th> <th>URL</th> </tr> </table> </div> <!-- <div id="myDynamicTable"> <input type="button" id="create" value="Click here" onclick="Javascript:addTable()"> to create a Table and add some data using JavaScript </div> --> </body> </html>
solution2
0 2015-03-23 18:35:31
I don't have the rep to comment so I can't ask for details, but just in case you can use jquery, you can hide and show stuff like this:
$(function(){
$("#add").click(function() {
var name = $('#name').val();
var domain = $('#domain').val();
var url = $('#url').val();
$('#hidey').show();
$('#nametd').html(name);
$('#domtd').html(domain);
$('#urltd').html(url);
})
});
https://jsfiddle.net/6dxLsnL4/
Or trigger on form submit instead of click if you want, but there, you might want to consider ajax, because then you can make sure the form is processed on the server side before displaying the results.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.