Question

下面提交的表单会在表格中显示内容。

什么有用 内容已成功通过表单传输到表。

什么无效

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

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

Answer 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>

Answer 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，因为这样您可以确保在显示结果之前在服务器端处理表单。

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

2 个答案: