已将行添加到带有jscolor颜色选择器的表中，但选择器未显示
已将行添加到带有jscolor颜色选择器的表中，但选择器未显示
提问于 2020-05-25 00:05:29
我在表格中使用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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-25 00:24:47
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61988645
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号