Question

我尝试创造一件简单的事情，所以让我试着解释一下，在哪里说'＃34;在这里表＆＃34;假设当前有一列有4列和6行，其中包含单元格内的内容。

不幸的是，我不知道如何在Javascript中制作它。

我已经拥有的代码：

     <form name="part">
        <p align="center">
        &nbsp;</p>
        <p align="center">
        <font face="Verdana" size="2">Please insert the part ID in the field 
        below:</font></p>
        <p align="center">
        <font face="Verdana" size="2">Part ID</font><font face="Verdana"><font size="2"> </font><input type="text" name="userid" size="19"/></font></p>
        <p align="center"><font face="Verdana"><font size="2">
        <p align="center">
        <input type="button" onclick="check(this.form)" value="Check now" style="font-family: Verdana"/><font face="Verdana" size="2">
        </font>
        <input type="reset" value="Cancel" style="font-family: Verdana"/></p>
    </form>
    <font face="Verdana" size="2">
    <script language="javascript">
        function check(form) { 
            if(form.userid.value == "1"){
               document.write("table here");
            }
            else if(form.userid.value == "2"){
               document.write("table 2 here");
            } 
             else {
                alert("The Part does not esxist\nor does not have compatibility")  }
        }
    </script>

我希望你能帮助我！：）

Answer 1

有许多方法可以在javascript中创建表格，但可能是最基本的，不需要任何外部库：

代码：

var $table      = document.createElement('table');
var $table_row  = document.createElement('tr'); // for each row
var $table_cell = document.createElement('td'); // for each cell

$table.appendChild($table_row);      // for each row
$table_row.appendChild($table_cell); // for each cell

document.body.appendChild($table); // eventually add the final table

HTML的

：

<table>
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
   </tr>
</table>

还有其他外部库可能对您有所帮助，但这是黄铜。

一些有用（基本）的CSS可能通常是：

table{
   width : 100%;
   border-spacing : 0px;
   border-collapse : collapse;
}

/* and then styling the inner cells */

table td{
   padding : 3px; /* or whatever suits you */
   border : 1px solid #efefef;
}

等...

外部库，例如https://datatables.net/可以帮助您获取数组（或对象数组）并将其转换为表格...提供排序，搜索，分页等功能（分页）......

这样一个看起来像这样的数组：

var data = [
   { name : "david", "age"  : 25, "sign" : "aries" },
   { name : "daniel", "age" : 32, "sign" : "whatever" },
   { name : "motke", "age"  : 18, "sign" : "falafel" }
];

将转换为像这样的完整外观的表

姓名|年龄|标志|
------------------------ |
大卫| 25 |白羊座|
丹尼尔| 32 |不管什么 Motke | 18 |沙拉三明治|

请原谅我糟糕的文字绘画技巧......

如果你想把它提升到一个新的水平，你总是可以使用数据绑定框架，例如modular.js - http://modularjs.co.nf/ - 或angular来生成类似于以下内容的HTML模板：

<table>
   <tr for="item in data">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.sign}}</td>
   </tr>
</table>

可以让您更好地控制数据的显示方式。在每个解决方案中都有利有弊，只需选择！

如何在javascript中创建表

1 个答案: