使用 jscolor 颜色选择器将行添加到表中，但选择器未显示答案

【问题标题】：Added row to table with jscolor colour picker but picker not showing使用 jscolor 颜色选择器将行添加到表中，但选择器未显示
【发布时间】：2020-05-24 16:05:28
【问题描述】：

我在表格中使用 jscolor 选择器。这在原始 HTML 中的一行中有效。但是，当我从 javascript 添加一行时，颜色选择器不起作用。检查创建的 HTML 时，输入标签是相同的。我认为用jscolor js注册这个元素一定有一些东西。

这里是演示问题的最小 HTML：

        <head>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
        </head>
        <button onclick="add_row_to_table()">Add Row</button>
        <table>
            <thead>
            <tr><th>Colour</th></tr>
            </thead>
            <tbody id="tableBody">
            <tr><td><input class="jscolor"></td></tr>
            </tbody>
        </table>

        <script type="text/javascript">
            function add_row_to_table(p) {
                tableBody = document.getElementById('tableBody');
                newRow = document.createElement('tr');
                colourCell = document.createElement('td');
                colourWidget = document.createElement('input');
                colourWidget.setAttribute('class', 'jscolor');
                colourWidget.setAttribute('autocomplete', 'off');
                colourWidget.setAttribute('style', 'background-image: none, background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);');
                colourCell.appendChild(colourWidget);
                newRow.appendChild(colourCell);
                tableBody.appendChild(newRow);
            }
        </script>

【问题讨论】：

标签： javascript jscolor

【解决方案1】：

<script type=... 有问题，您需要使用new jscolor(... 注册新输入，这是一个工作代码

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
  </head>
  <body>
    <button onclick="add_row_to_table()">Add Row</button>
    <table>
      <thead>
        <tr><th>Colour</th></tr>
      </thead>
      <tbody id="tableBody">
        <tr><td><input class="jscolor"></td></tr>
      </tbody>
    </table>
    <script type="text/javascript">
      function add_row_to_table(p) {
        tableBody = document.getElementById('tableBody');
        newRow = document.createElement('tr');
        colourCell = document.createElement('td');
        colourWidget = document.createElement('input');
        colourWidget.setAttribute('class', 'jscolor');
        colourCell.appendChild(colourWidget);
        newRow.appendChild(colourCell);
        tableBody.appendChild(newRow);
        new jscolor(colourWidget);
      }
    </script>
  </body>
</html>

https://jsbin.com/jaxixod/edit?html,output

【讨论】：