Question

I am looking for a javascript plugin that will let users create MySQL tables using a very basic HTML interface. Ideally a CREATE statement would result from the HTML table. Does anyone know of such a script?

Answer 1

to my knowledge there is not a jquery plugin that will allow you to ‘create’ database tables, regardless you would still have to use some server side code to handle the actual SQL etc. it is not too difficult to create something yourself, i knocked together this which i think is the kinda thing your looking for. note: this is not a full implementation 😛 just an idea, basically create the table using html, parse it to json, then send it to the server to deal with it.

initial html ‘template’:

<table id="table_designer">
    <tr class="table_name">
        <td><input type="text" placeholder="table name" /></td>
    </tr>
    <tr class="field_name">
        <td>name</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="type">
        <td>type</td>
        <td><select>
            <option>int</option>
            <option>varchar</option>
            <option>date</option>
        </select></td>
    </tr>
    <tr class="primary_key">
        <td>primary key</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr class="relationship">
        <td>related type</td>
        <td><select>
            <option>none</option>
            <option>one to many</option>
            <option>many to one</option>
            <option>many to many</option>
        </select></td>
    </tr>
    <tr class="related_table">
        <td>related table</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="related_field">
        <td>related field</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="controls">
        <td><button id="save">save</button></td>
        <td>
            <button id="delete">delete</button>
            <button id="add">add</button>
        </td>
    </tr>
</table>

some jquery to handle the ‘actions’

/* parses table as json and sends to server */
$('#save').click(function() {
    var json= {};

    $('#table_designer tr').each(function(){
        var $t = $(this),
            prop = $t.attr('class');

        json[prop] = [];

        $t.children('td').each(function() {
            json[prop].push($(this).children().first().val());
        });
    });

    alert(JSON.stringify(json, null, " "));

    /* send the data to the server
    $.post('www.mysite.com', json, function(d, t, j) 
           { alert('success'); });
    */
});

/* deletes parent column */
$('#delete').click(function() {
    var $t = $(this),
        pos = $t.parents('td').index() + 1;

    $('#table_designer tr').each(function(){
        $(this).children('td:nth-child(' + pos +')').remove();
    });
});

/* adds a new field */
$('#add').click(function() {
    var $t = $(this),
        pos = $t.parents('td').index() + 1;

    $('#table_designer tr').each(function(){
        var clone = $(this).children('td').last().clone(true);
        clone.children('input').val('');
        $(this).children('td:nth-child(' + pos +')').after(clone);
    });
});

​