如何创建一个表，每次用户单击它时都会附加一列答案

【问题标题】：How can I create a table that appends a column every time a user clicks on it如何创建一个表，每次用户单击它时都会附加一列
【发布时间】：2018-04-12 03:16:45
【问题描述】：

我想在 html 中创建一个表格，每次用户点击它时都会添加一列（起始列数：1）。

所以理想情况下，如果用户点击表格 6 次，表格应该如下所示：

这是我的 HTML 和 js：

<!DOCTYPE html>
<html>
<body>
<head>
    <title></title>
    <script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <link rel = "stylesheet" type" type="text/css" href = "style.css">
    <script src="jquery-ui.min.js"></script>
    <table id = "table" style="width: 100%; height: 100px; border-style: solid">
        <tr>
            <th class = "column"></th>
        </tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
    $("#table").click(function()
    {
        var column = document.createElement("TH")
        column.className = "column";
        document.getElementById("table").appendChild(column);   
    });
});
</script>

当用户点击 6 次时会发生这样的情况：

当用户单击时，似乎正在创建一个新行。有什么办法可以解决这个问题吗？

【问题讨论】：

标签： javascript jquery html dom html-table

【解决方案1】：

给你一个解决方案

$(document).ready(function() {
  $("#table").click(function(){
    $(this).find('tr').append("<th class='column'></th>");   
  });
});

.column {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
  <tr>
      <th class = "column"></th>
  </tr>
</table>

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
  border: 1px solid ;
  background:#AEB6BF;
}
.column {
  border: 1px solid ;
  background:#EAEDED;

}
</style>
<script>
$(document).ready(function() {
  $("#btnAdd").click(function(){

    var CoulmnCount=$("table > tbody > tr:first > td").length+1;

    $("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");   
     $("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");  
  });
});
</script>
</head>
<body>

<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
  <thead>
  <tr>
      <th class = "head">Header1</th>
  </tr>
   </thead>
   <tbody>
   <tr>
      <td class = "column">Coulmn1</td>
  </tr>
   </tbody>
</table>
</body>
</html>

【讨论】：