füllen Farbe für jede Zelle Zelle mit Farbe-Option nur im Dropdown-Menü aufgeführt, wenn geklickt

Ich muss Tabelle erstellen, indem Sie auf die Schaltfläche wo Tabelle enthält Spalten und Zeilen vom Benutzer angegeben. Danach müssen wir jede Tabellenzelle füllen, indem wir einen Klick mit der Farbe ausführen, die im Dropdown-Menü aufgelistet ist.füllen Farbe für jede Zelle Zelle mit Farbe-Option nur im Dropdown-Menü aufgeführt, wenn geklickt

Das folgende Code-Snippet dient zum Erstellen einer Tabelle mit Benutzereingaben. Ich weiß nicht weiter zu gehen. Wie führe ich das durch?

**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>

Quelle

2016-08-19 nirmalnk

starten Griff: [" class1 ", "Klasse 2", " class3 "]' zu einer Klasse, die existiert – mplungjan

Try this: Sie können für alle td und stellen Sie Hintergrundfarbe als ein Wert von dropDown einen Click-Ereignishandler hinzuzufügen.

<!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>

Quelle

2016-08-19 08:46:24

danke dir bro !! bekam Antwort :) – nirmalnk

glücklich, Ihnen zu helfen :) –

Sie sollten durch Änderung `Klasse onclick Fall td und setzen Hintergrund des angeklickt td-select Wert

<!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>

Quelle

2016-08-19 08:52:28

füllen Farbe für jede Zelle Zelle mit Farbe-Option nur im Dropdown-Menü aufgeführt, wenn geklickt

Antwort

Verwandte Themen