Hallo,
ich baue grad ein Skript um leicht MySQL-Tabellen zu erstellen.
Die Spalten mit ihren definitionen werden in zeilen einer TABLE definiert. Per button kann man zeilen einfügen/entfernen um so die anzahl der Spalten zu bestimmen. Dann wird per jQ ein TR Objekt hinzugefügt bzw. entfernt. In diesen TRs werden TDs generiert die alle eine unterschiedliche ID haben (die id wird aus der anzahl der bisherigen TRs + 1 errechnet.
Wenn ich die query generieren will, durchlaufe ich eine forschleife die von 1 bis zur anzahl der TRs ( - 1 wegen einer kopfzeile) zählt. Dadurch werden für jede Zeile die Inputfelder ermittelt und die Query zusammengebaut.
Aber die per jQ hinzugefügten Inputfelder werden bei den EventHandlern nicht berücksichtigt. D.H. wenn ich dort text eingebe passiert nichts. Liegt dass möglicherweise daran, dass $(document).ready() nur für die inputfelder eventhandler registriert, die beim aufbau der seite vorhanden sind?
LG Spam
ich baue grad ein Skript um leicht MySQL-Tabellen zu erstellen.
Die Spalten mit ihren definitionen werden in zeilen einer TABLE definiert. Per button kann man zeilen einfügen/entfernen um so die anzahl der Spalten zu bestimmen. Dann wird per jQ ein TR Objekt hinzugefügt bzw. entfernt. In diesen TRs werden TDs generiert die alle eine unterschiedliche ID haben (die id wird aus der anzahl der bisherigen TRs + 1 errechnet.
Wenn ich die query generieren will, durchlaufe ich eine forschleife die von 1 bis zur anzahl der TRs ( - 1 wegen einer kopfzeile) zählt. Dadurch werden für jede Zeile die Inputfelder ermittelt und die Query zusammengebaut.
Aber die per jQ hinzugefügten Inputfelder werden bei den EventHandlern nicht berücksichtigt. D.H. wenn ich dort text eingebe passiert nichts. Liegt dass möglicherweise daran, dass $(document).ready() nur für die inputfelder eventhandler registriert, die beim aufbau der seite vorhanden sind?
PHP-Code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script>
function insert_row(){
var num = $("table tr").length;
var html = '<tr>';
html += '<td class="id">' + num + '</td>';
html += '<td><input type="text" id="name_' + num + '" /></td>';
html += '<td><input type="text" id="type_' + num + '" /></td>';
html += '<td><input type="number" id="length_' + num + '" /></td>';
html += '<td><input type="text" id="values_' + num + '" /></td>';
html += '<td><input type="checkbox" id="null_' + num + '" /></td>';
html += '<td><input type="text" id="default_' + num + '" /></td>';
html += '<td><input type="text" id="extra_' + num + '" /></td>';
html += '<td><input type="checkbox" id="unique_' + num + '" /></td>';
html += '<td><input type="checkbox" id="primary_' + num + '" /></td>';
html += '</tr>';
$("table tr:last").after(html);
query();
}
function delete_row(){
if(!($("table tr:last").is("table tr:eq(2)"))){
$("table tr:last").remove();
query();
}
}
function check_table_name(){
}
function query(){
//alert($("table tr").length - 1);
if(!($("#name").val() == "")){
var query = "CREATE TABLE `" + $("#name").val() + "` (";
var primary = "";
for(var i = 1; i <= $("table tr").length - 1; i++){
if($("#name_" + i).val() != "" && $("#type_" + i).val() != ""){
query += "<br>`" + $("#name_" + i).val() + "` ";
query += $("#type_" + i).val();
if($("#length_" + i).val() > 0){
query += "(" + $("#length_" + i).val() + ")";
}
if(!$("#null_" + i).prop("checked")){
query += " NOT NULL";
}
if($("#default_" + i).val() != ""){
query += " DEFAULT " + $("#default_" + i).val();
}
if($("#extra_" + i).val() != ""){
query += " " + $("#extra_" + i).val();
}
if($("#unique_" + i).prop("checked")){
query += " UNIQUE KEY";
}
if(i < $("table tr").length - 1) query += ",";
if($("#primary_" + i).prop("checked")){
if(primary == ""){
primary += "(";
}else{
primary += ", ";
}
primary += "`" + $("#name_" + i).val() + "`";
}
}
}
if(primary != "") query += ",<br>PRIMARY KEY " + primary + ")";
query += "<br>)";
$("#query").html(query);
}
}
$(document).ready(function(){
$("#name").keyup(function(){
check_table_name();
});
$("#name").focusout(function(){
check_table_name();
});
$("input").keyup(function(){
query();
});
$("input").change(function(){
query();
});
$("input").focusout(function(){
query();
});
});
</script>
</head>
<body>
<input type="button" onclick="insert_row();" class="button" value="Zeile einfügen" /> <input type="button" onclick="delete_row()" class="button" value="Letzte Zeile löschen" /><br><br>
<table border=0>
<tr>
<td class="id">#</td>
<td>Bezeichnung</td>
<td>Typ</td>
<td>Länge</td>
<td>Werte</td>
<td>Null</td>
<td>Standard</td>
<td>Zusätze</td>
<td>Einzigartig</td>
<td>Primärschlüssel</td>
</tr>
<tr>
<td class="id">1</td>
<td><input type="text" id="name_1" /></td>
<td><input type="text" id="type_1" /></td>
<td><input type="number" id="length_1" /></td>
<td><input type="text" id="values_1" /></td>
<td><input type="checkbox" id="null_1" /></td>
<td><input type="text" id="default_1" /></td>
<td><input type="text" id="extra_1" /></td>
<td><input type="checkbox" id="unique_1" /></td>
<td><input type="checkbox" id="primary_1" /></td>
</tr>
<tr>
<td class="id">2</td>
<td><input type="text" id="name_2" /></td>
<td><input type="text" id="type_2" /></td>
<td><input type="number" id="length_2" /></td>
<td><input type="text" id="values_2" /></td>
<td><input type="checkbox" id="null_2" /></td>
<td><input type="text" id="default_2" /></td>
<td><input type="text" id="extra_2" /></td>
<td><input type="checkbox" id="unique_2" /></td>
<td><input type="checkbox" id="primary_2" /></td>
</tr>
</table>
<div id="query"></div>
</body>
Kommentar