填充颜色为每个单元格的颜色选项下拉菜单中列出只有点击

我必须通过单击按钮创建表，其中表中包含由用户指定的列和行。之后，我们必须通过使用下拉列表菜单中列出的颜色执行onclick来填充每个表格单元格。填充颜色为每个单元格的颜色选项下拉菜单中列出只有点击

下面的代码片段是用用户的输入创建表。我不知道继续下去。如何执行此操作？

**click here to view the Expected Output **

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<style> 
 
.highlighted { 
 
    background: red; 
 
} 
 
    table{ 
 
    \t width:500px; 
 
\t \t height:500px; 
 
\t } 
 
\t table td{ 
 
\t \t padding:10px; 
 
\t \t margin:10px; 
 
\t \t border:1px solid #ccc; 
 
\t } 
 
    table tr{ 
 
height:100px; 
 
} 
 
</style> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script> 
 

 

 
    function createTable(){ 
 
     
 
\t mytable = $('<table></table>').attr({ id: "basicTable" }); 
 
\t var rows = new Number($("#rows").val()); 
 
\t var cols = new Number($("#columns").val()); 
 
\t var tr = []; 
 
\t for (var i = 0; i < rows; i++) { 
 
\t \t var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable); 
 
\t \t for (var j = 0; j < cols; j++) { 
 
\t \t \t $('<td></td>').text("").appendTo(row); 
 
\t \t } 
 
\t \t \t \t 
 
\t } 
 
\t console.log("TTTTT:"+mytable.html()); 
 
\t mytable.appendTo("#matrixTableId"); \t   
 
    
 
} 
 
</script> 
 
</head> 
 
<body> 
 
Enter Rows <input type='text' id='rows'><br> 
 
Enter Cols <input type='text' id='columns'><br> 
 
<input type="button" onclick="createTable();" name="save" value="Form Matrix" /><br> 
 
Choose Color: <select id="dropDown"> 
 
    <option value="red">Red</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="yellow">Yellow</option> 
 
    </select> 
 
    <br><br> 
 
    <div id="matrixTableId"> 
 
    
 
    </div> 
 
</body> 
 
</html>

来源

2016-08-19 nirmalnk

开始通过改变'类：“class1的“，”class2“，” class3“]'给一个存在的类 – mplungjan

试试这个：您可以添加一个click事件处理所有td并设置背景颜色从下拉列表中值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<style> 
 
.highlighted { 
 
    background: red; 
 
} 
 
    table{ 
 
    \t width:500px; 
 
\t \t height:500px; 
 
\t } 
 
\t table td{ 
 
\t \t padding:10px; 
 
\t \t margin:10px; 
 
\t \t border:1px solid #ccc; 
 
\t } 
 
    table tr{ 
 
height:100px; 
 
} 
 
</style> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script> 
 

 

 
    function createTable(){ 
 
     
 
\t mytable = $('<table></table>').attr({ id: "basicTable" }); 
 
\t var rows = new Number($("#rows").val()); 
 
\t var cols = new Number($("#columns").val()); 
 
\t var tr = []; 
 
\t for (var i = 0; i < rows; i++) { 
 
\t \t var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable); 
 
\t \t for (var j = 0; j < cols; j++) { 
 
\t \t \t $('<td></td>').text("").appendTo(row); 
 
\t \t } 
 
\t \t \t \t 
 
\t } 
 
\t console.log("TTTTT:"+mytable.html()); 
 
\t mytable.appendTo("#matrixTableId"); \t   
 
    
 
} 
 
    
 
$(function(){ 
 
    $(document).on("click","table tr td", function(){ 
 
    var color = $('#dropDown').val(); 
 
    $(this).css('background-color', color); 
 
    }); 
 
    }); 
 
</script> 
 
</head> 
 
<body> 
 
Enter Rows <input type='text' id='rows'><br> 
 
Enter Cols <input type='text' id='columns'><br> 
 
<input type="button" onclick="createTable();" name="save" value="Form Matrix" /><br> 
 
Choose Color: <select id="dropDown"> 
 
    <option value="red">Red</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="yellow">Yellow</option> 
 
    </select> 
 
    <br><br> 
 
    <div id="matrixTableId"> 
 
    
 
    </div> 
 
</body> 
 
</html>

来源

2016-08-19 08:46:24

谢谢你兄弟！得到的答案:) – nirmalnk

高兴地帮助你:) –

您应该处理的tdonclick事件，并点击td的设置背景select值

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<style> 
 
.highlighted { 
 
    background: red; 
 
} 
 
    table{ 
 
    \t width:500px; 
 
\t \t height:500px; 
 
\t } 
 
\t table td{ 
 
\t \t padding:10px; 
 
\t \t margin:10px; 
 
\t \t border:1px solid #ccc; 
 
\t } 
 
    table tr{ 
 
height:100px; 
 
} 
 
</style> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script> 
 

 

 
    function createTable(){ 
 
     
 
\t mytable = $('<table></table>').attr({ id: "basicTable" }); 
 
\t var rows = new Number($("#rows").val()); 
 
\t var cols = new Number($("#columns").val()); 
 
\t var tr = []; 
 
\t for (var i = 0; i < rows; i++) { 
 
\t \t var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable); 
 
\t \t for (var j = 0; j < cols; j++) { 
 
\t \t \t var $td = $('<td></td>'); 
 
\t \t \t $td.text("").appendTo(row); 
 
\t \t \t $td.click(function(){ 
 
\t \t \t $(this).css('background',$('#dropDown').val()); 
 
\t \t \t }); 
 
\t \t } 
 
\t \t \t \t 
 
\t } 
 
\t console.log("TTTTT:"+mytable.html()); 
 
\t mytable.appendTo("#matrixTableId"); \t   
 
    
 
} 
 
</script> 
 
</head> 
 
<body> 
 
Enter Rows <input type='text' id='rows'><br> 
 
Enter Cols <input type='text' id='columns'><br> 
 
<input type="button" onclick="createTable();" name="save" value="Form Matrix" /><br> 
 
Choose Color: <select id="dropDown"> 
 
    <option value="red">Red</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="yellow">Yellow</option> 
 
    </select> 
 
    <br><br> 
 
    <div id="matrixTableId"> 
 
    
 
    </div> 
 
</body> 
 
</html>

来源

2016-08-19 08:52:28

填充颜色为每个单元格的颜色选项下拉菜单中列出只有点击

回答

相关问题