如何隐藏和显示通过表单填充的表
[英]How to hide and show table that is populated via a form
问题描述
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.我在CSS中尝试了#myTableData {visibility: hidden;}，然后尝试在我的addtable函数中插入(.style.visibility="visible";)Javascript以显示该表，但是它不起作用。 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). 我添加了（td.style.width ='200px'；但是我看不到任何变化）。
CSS or JS for controlling table ? CSS或JS控制表？
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 个解决方案
解决方案1
0 已采纳 2015-03-23 17:59:44
1) In function addRow add table.style.visibility = "visible"; 1）在功能addRow添加table.style.visibility = "visible"; ,to display the table, right after var table = document.getElementById("myTableData"); ，以在var table = document.getElementById("myTableData");之后显示表格var table = document.getElementById("myTableData"); . 。
2) To set styles like width you can can use setAttribute method. 2）要设置width样式，可以使用setAttribute方法。
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. 注意：我看不到在哪里使用addTable函数，也许这就是为什么某些样式在需要时未设置的原因。
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>
解决方案2
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: 我没有代表对此发表评论，所以我无法要求提供详细信息，但以防万一您可以使用jquery，可以隐藏和显示以下内容：
$(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/ 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. 或者，如果需要的话，触发表单提交而不是单击，但是在那里，您可能要考虑使用ajax，因为这样可以确保在显示结果之前在服务器端处理了表单。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.