Arhn - архитектура программирования

jQuery для динамического изменения имени столбца таблиц MYSQL

У меня есть таблица на моей странице, и я использую 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
});

 });
22.06.2015

Ответы:


1

Если вы хотите установить новое имя или идентификатор для ввода, вы должны использовать подсказку.

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

это позволяет вам ввести значение и присвоить значение переменной, а затем установить на входе.

Хорошо, давайте сделаем это!

Во-первых: замените идентификатор:

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

Второе: спросите новый идентификатор, имя или значение

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

Третье: назначьте идентификатор и значение для метки

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

Четвертое: назначьте идентификатор, имя или значение для ввода

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>
22.06.2015
  • Можете ли вы сказать, как это можно сделать динамически в таблице MYSQL. например, динамическое добавление новых полей в таблицу MYSQL. 23.06.2015
  • Пожалуйста; Если вам нужно в mysql, вы можете использовать вставку и удаление, я не знаю, понимаю ли я ваш вопрос 23.06.2015
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..