仅在单击时为每个 table 单元格填充颜色，颜色选项在下拉菜单中列出

Question

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

下面的代码片段是根据用户的输入创建 table。我不知道进一步进行。如何执行此操作？

<!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{
     width:500px;
  height:500px;
 }
 table td{
  padding:10px;
  margin:10px;
  border:1px solid #ccc;
 }
    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(){
     
 mytable = $('<table></table>').attr({ id: "basicTable" });
 var rows = new Number($("#rows").val());
 var cols = new Number($("#columns").val());
 var tr = [];
 for (var i = 0; i < rows; i++) {
  var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
  for (var j = 0; j < cols; j++) {
   $('<td></td>').text("").appendTo(row); 
  }
      
 }
 console.log("TTTTT:"+mytable.html());
 mytable.appendTo("#matrixTableId");        
  
}
</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>

Answer 1

试试这个：您可以为所有 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{
     width:500px;
  height:500px;
 }
 table td{
  padding:10px;
  margin:10px;
  border:1px solid #ccc;
 }
    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(){
     
 mytable = $('<table></table>').attr({ id: "basicTable" });
 var rows = new Number($("#rows").val());
 var cols = new Number($("#columns").val());
 var tr = [];
 for (var i = 0; i < rows; i++) {
  var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
  for (var j = 0; j < cols; j++) {
   $('<td></td>').text("").appendTo(row); 
  }
      
 }
 console.log("TTTTT:"+mytable.html());
 mytable.appendTo("#matrixTableId");        
  
}
 
$(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>

Answer 2

您应该处理 td 的 onclick 事件并将点击的 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{
     width:500px;
  height:500px;
 }
 table td{
  padding:10px;
  margin:10px;
  border:1px solid #ccc;
 }
    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(){
     
 mytable = $('<table></table>').attr({ id: "basicTable" });
 var rows = new Number($("#rows").val());
 var cols = new Number($("#columns").val());
 var tr = [];
 for (var i = 0; i < rows; i++) {
  var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
  for (var j = 0; j < cols; j++) {
   var $td = $('<td></td>');
   $td.text("").appendTo(row); 
   $td.click(function(){
     $(this).css('background',$('#dropDown').val());
   });
  }
      
 }
 console.log("TTTTT:"+mytable.html());
 mytable.appendTo("#matrixTableId");        
  
}
</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>

仅在单击时为每个 table 单元格填充颜色，颜色选项在下拉菜单中列出

fill color for each table cell with color-option listed in drop menu only if clicked

html

javascript

css

jquery