如何隐藏和显示通过表单填充的表
[英]How to hide and show table that is populated via a form
问题描述
下面是提交表单时在表格中显示内容的表格。
可行的方法内容已成功通过表格传输到表格。
什么不起作用
我想在页面加载时隐藏表格，并且仅在提交表单后才显示。
我在CSS中尝试了
#myTableData {visibility: hidden;}，然后尝试在我的addtable函数中插入(.style.visibility="visible";)Javascript以显示该表，但是它不起作用。 我不确定我是否理解这项权利。另外，我如何控制表格的显示（如宽度，背景颜色，字体等）。 我添加了（td.style.width ='200px'；但是我看不到任何变化）。
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）在功能addRow添加table.style.visibility = "visible"; ，以在var table = document.getElementById("myTableData");之后显示表格var table = document.getElementById("myTableData"); 。
2）要设置width样式，可以使用setAttribute方法。
document.getElementById('myTableData').setAttribute("style","width:200px");
注意：我看不到在哪里使用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
我没有代表对此发表评论，所以我无法要求提供详细信息，但以防万一您可以使用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/
或者，如果需要的话，触发表单提交而不是单击，但是在那里，您可能要考虑使用ajax，因为这样可以确保在显示结果之前在服务器端处理了表单。
如果没有数据，如何隐藏表格并使用jquery或javascript显示表单
[英]how to hide the table if there is no data and show the form using jquery or javascript
如何通过Jquery隐藏/显示添加和编辑项目页面上的表单字段
[英]How to Hide/Show Form Fields on Add and Edit Item Pages via Jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.