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

Question

下面是提交时显示内容的表单table。

有效方法 内容已通过表单成功传输到 table。

什么不起作用

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

我在 css 中尝试了 #myTableData {visibility: hidden;}，然后我尝试在我的 addtable 函数中插入 (.style.visibility="visible";) Javascript 以显示 table但它不起作用。我不确定我是否理解正确。
还有如何控制 table 的显示（如宽度、背景颜色、字体等）。我添加了 (td.style.width = '200px'; 但我没有看到任何变化)。

CSS 还是 JS 控制 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>

&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");.

之后显示table

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

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

How to hide and show table that is populated via a form

javascript

forms

dom

html-table