2
ユーザーが指定した列と行がテーブルにあるボタンをクリックしてテーブルを作成する必要があります。その後、ドロップダウンリストメニューに表示されている色でonclickを実行して、各表のセルを塗りつぶす必要があります。各テーブルセルの色を塗りつぶします。ドロップされたメニューのみにカラーオプションが表示されます
以下のコードスニペットは、ユーザーの入力による表を作成するためのコードです。私はさらに進むことを知らない。これを行う方法？
<!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>
スタートの背景を設定する必要があります。["クラス1 "、" class2 "、" class3 "]'存在するクラスに – mplungjan