我的页面中有一个表，我正在使用 mysql。问题是我想动态地添加一个新字段。该选项添加列名，然后添加值。添加列字段后，它应该要求为输入数据添加列。 我正在考虑在从用户那里获取列名后更改列名。 是否可以。 这可能是解决这个问题的有效方法。
为清楚起见...问题是
我有 3 列(在我的 MYSQL 表中总共有 6 列)，例如 COL1、COL2、COL3。 当我要求输入时，它是这样的:
COL1: ___________________
COL2: ___________________
COL3: ___________________
Do you want more fields : y/N
如果是，那么我想为他们添加 COL4、COL5、COL6，最大为 3。 (我在表中添加了 6 列，其中 3 列带有 NULL 值以供额外使用) 另外，我必须允许用户决定列名称。更清楚的是，如果选择了“y”，则会出现一个包含两个字段的弹出窗口 - 一个用于列名及其各自的数据
_________________ : ________________
.之后列名应该能够直接显示并只询问数据。
COL1: ___________________
COL2: ___________________
COL3: ___________________
theCOLUMNNAME : ___________________
Do you want more fields : y/N
编辑
我已经使用 jQuery 动态添加字段条目，如下所示:
$(document).on('click', '.add_button', function(){
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/> <input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="images/remove-icon.png"/></a></div>'; //New input field html
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
最佳答案
如果你想为你必须使用的输入设置一个新的名字或id 提示
var newid = prompt("Set the new ID");
它允许您输入一个值并在 var 中分配该值，然后在输入中进行设置。
好的，让我们开始吧!
首先:替换id:
var id = "input" + $(this).attr("id").replace("field","");
第二:询问新的ID、名称或值
id = prompt("Set the new ID");
第三:为label分配id和value
var label = $("<label for=\"" + id + "\">" + id + "</label>");
第四:给input赋id、name或value
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\"+ value=\"" + id + "\" />");
这里是代码。我用了这个例子:https://jsfiddle.net/qBURS/2/然后我修改了 JS
HTML
<html>
<head></head>
<body>
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a field" class="add" id="add" />
</body>
</html>
JS
<script>
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" class=\"fieldname\" />");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$("#preview").click(function() {
$("#yourform").remove();
var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
$("#buildyourform div").each(function() {
var id = "input" + $(this).attr("id").replace("field","");
id = prompt("Set the new ID");
var label = $("<label for=\"" + id + "\">" + id + "</label>");
var input;
switch ($(this).find("select.fieldtype").first().val()) {
case "checkbox":
input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textbox":
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\"+ value=\"" + id + "\" />");
break;
case "textarea":
input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
break;
}
fieldSet.append(label);
fieldSet.append(input);
});
$("body").append(fieldSet);
});
});
</script>
关于php - jQuery 动态改变 MYSQL 表的列名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30982817/