如何隐藏和显示通过表单填充的表格答案

【问题标题】：How to hide and show table that is populated via a form如何隐藏和显示通过表单填充的表格
【发布时间】：2015-05-26 20:16:08
【问题描述】：

以下是提交时的表单，以表格的形式显示内容。

什么有效 内容通过表格成功传输到表格。

什么不起作用

我想在页面加载时隐藏表格，仅在提交表单后显示。

我在 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>

&nbsp;
 
</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>

【问题讨论】：

标签： javascript forms dom html-table

【解决方案1】：

1) 在函数addRow 中添加table.style.visibility = "visible"; 以显示表格，紧跟在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>

&nbsp;
 
</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】：

我没有代表发表评论，所以我无法询问详细信息，但以防万一您可以使用 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，因为这样您可以确保在显示结果之前在服务器端处理表单。

【讨论】：

非常感谢。我对 JS 和 Jquery 很陌生。所以我将通过这段代码并尝试学习。谢谢。
你打赌。 Jquery 很棒的原因有很多，不仅让您的工作更轻松，而且还改善了它所涉及的所有内容的外观和可用性。强烈推荐学习。