jQuery动态更改MYSQL表的列名

Question

I have a table in my page and iam using mysql. 我的页面中有一张表，并且使用mysql进行访问。 The problem is that i wanted to add a new field dynamically to it. 问题是我想向其动态添加一个新字段。 The option adds the column name and then the values. 该选项添加列名，然后添加值。 After adding the column fields then it should ask for the added column for the input data. 添加列字段之后，它应该要求添加的列作为输入数据。 Iam thinking of altering the column names after getting the column names from the user. 我想在从用户那里获得列名后更改列名。 Is it possible. 可能吗。 which may be the efficient way to approach this problem. 这可能是解决此问题的有效方法。

For clarity...the problem is 为了清楚...问题是

I have 3 columns ( in my MYSQL table total of 6 )say COL1, COL2, COL3. 我有3列（在我的MYSQL表中共有6列），例如COL1，COL2，COL3。 When i ask for input its is like this: 当我要求输入时，它是这样的：

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

If YES, then i want to add COL4, COL5,COL6 for them with a max of 3 . 如果是，那么我想为它们添加COL4，COL5，COL6的最大值为3 。 ( i added a 6 columns in the table with the 3 columns with NULL values for the extra usage ) ALSO, i have to allow user to decide the COLUMN Name. （我在表中添加了6列，其中3列带有NULL值，以供额外使用）此外，我还必须允许用户确定COLUMN名称。 In more clear way, if "y" is selected, then a popup with two fields - one for the Column name and its respective data 更明确的方式是，如果选择“ y”，则将弹出一个具有两个字段的字段-一个用于列名称及其各自的数据

_________________   :  ________________

. 。 After that the column name should be able to show directly and ask just for the data. 之后，列名应该可以直接显示并仅要求提供数据。

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

EDIT 编辑

I have used jQuery to add the field entries dynamically like this: 我已经使用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

If you want to set a new name or id for the input you must to use prompt 如果要为输入设置新名称或ID，则必须使用提示

var newid = prompt("Set the new ID");

that allows you to enter a value and assign the value in a var and then set in the input. 允许您输入一个值并在var中分配该值，然后在输入中进行设置。

Ok, let's do this! 好吧，让我们做吧！

First: replace the id: 首先：替换ID：

var id = "input" + $(this).attr("id").replace("field","");

Second: ask the new ID, name or value 第二：询问新的ID，名称或值

id = prompt("Set the new ID");

Third: assign the id and value for label 第三：为标签分配ID和值

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

Fourth: assign the id, name or value to the input 第四：为输入分配ID，名称或值

input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\"+ value=\"" + id + "\" />");

Here the code. 这里的代码。 I used this example: https://jsfiddle.net/qBURS/2/ and I modified the JS 我使用了以下示例： https : //jsfiddle.net/qBURS/2/ ，我修改了JS

HTML 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 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表的列名

问题描述

EDIT 编辑

1 个解决方案

解决方案1
2 2015-06-22 16:17:56

jQuery动态更改MYSQL表的列名

问题描述

EDIT 编辑

1 个解决方案

解决方案1 2 2015-06-22 16:17:56

解决方案1
2 2015-06-22 16:17:56