Question

我的页面中有一个表，我使用mysql。问题是我想动态添加一个新字段。该选项会添加列名称，然后添加值。添加列字段后，它应该要求输入数据的添加列。我想在从用户获取列名后改变列名。可能吗。这可能是解决这个问题的有效方法。

为清楚起见......问题是

我有3列（在我的MYSQL表中总共6列）说COL1，COL2，COL3。当我要求输入时，它是这样的：

 COL1:  ___________________
 COL2:  ___________________
 COL3:  ___________________
 Do you want more fields : y/N

如果是，那么我想为他们添加COL4，COL5，COL6，最大值为3 。（我在表中添加了6列，其中3列带有NULL值以供额外使用）此外，我必须允许用户决定COLUMN名称。以更清晰的方式，如果＆＃34; y＆＃34;选中，然后弹出一个包含两个字段的弹出窗口 - 一个用于列名称及其各自的数据

_________________   :  ________________

。之后，列名应该能够直接显示并仅询问数据。

    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
});

 });

Answer 1

如果要为输入设置新名称或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");

第三步：为标签

分配id和值

var label = $("<label for=\"" + id + "\">" + id + "</label>");

第四步：将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>

jQuery动态地改变MYSQL表的列名

修改

1 个答案: