使用JavaScript实现动态表单并解决WebSQL动态列插入数据的问题

我正尝试使用JavaScript创建动态表单，表单创建完成后需将所有数据通过WebSQL存入数据库。以下是我用于动态创建元素的代码：

<script type="text/javascript"> 
function add(type) { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 
    //Assign different attributes to the element. 
    element.setAttribute("type", type); 
    element.setAttribute("value", type); 
    element.setAttribute("name", type); 
    var tab = document.getElementById("fooBar"); 
    //Append the element in page (in span). 
    tab.appendChild(element); 
    var linebreak = document.createElement("br"); 
    tab.appendChild(linebreak); 
} 
</script> 
<body> 
<form> 
    <h2>Dynamically add element in form.</h2> 
    Select the element and hit Add to add it in form. <br/> 
    <select name="element"> 
        <option value="button">Button</option> 
        <option value="text">Textbox</option> 
        <option value="radio">Radio</option> 
        <option value="checkbox">Checkbox</option> 
        <option value="textarea">Textarea</option> 
        <option></option> 
    </select> 
    <input type="button" value="Add" onclick="add(document.forms[0].element.value)" /> 
    <br/> <br/> <br/> 
    <h3> Form </h3> <br/> <br/> 
    <span id="fooBar"></span> <br/> 
</form> 
<script type="text/javascript"> 
var db = openDatabase("User", "1.0", "applicant data", 2 * 1024 * 1024); 
</script> 
</body>

我已成功创建表单，但不知如何为数据插入动态创建列，恳请各位提供帮助。

刚好做过类似的需求，咱们分两步解决：先同步动态元素和数据库表结构，再收集数据插入数据库，下面是具体实现：

1. 先创建基础数据表 #

首先得有个基础表，用来承载后续的动态列。页面加载时就初始化它：

document.addEventListener('DOMContentLoaded', function() {
    db.transaction(function(tx) {
        // 先建个带主键的基础表，其他列后续动态加
        tx.executeSql(
            'CREATE TABLE IF NOT EXISTS form_data (id INTEGER PRIMARY KEY AUTOINCREMENT)',
            [],
            () => console.log('基础表创建成功'),
            (tx, err) => console.error('建表失败:', err.message)
        );
    });
});

2. 添加元素时同步更新表结构 #

你原来的add函数只创建了页面元素，现在要加上数据库列的检查和添加逻辑，还要处理textarea的特殊情况（它不是input标签）：

function add(type) {
    let element;
    // 单独处理textarea，因为它不是input元素
    if (type === 'textarea') {
        element = document.createElement('textarea');
        element.setAttribute('name', type);
        element.textContent = type;
    } else {
        element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);
    }

    var tab = document.getElementById("fooBar");
    tab.appendChild(element);
    var linebreak = document.createElement("br");
    tab.appendChild(linebreak);

    // 同步更新数据库表结构
    db.transaction(function(tx) {
        // 查询当前表的所有列
        tx.executeSql(
            "PRAGMA table_info(form_data)",
            [],
            (tx, result) => {
                let columnExists = false;
                // 遍历列，检查当前类型的列是否已存在
                for (let i = 0; i < result.rows.length; i++) {
                    if (result.rows.item(i).name === type) {
                        columnExists = true;
                        break;
                    }
                }
                // 如果列不存在，就新增
                if (!columnExists) {
                    // 根据元素类型选SQL数据类型：复选/单选用INTEGER存0/1，其他用TEXT
                    let sqlType = 'TEXT';
                    if (type === 'checkbox' || type === 'radio') {
                        sqlType = 'INTEGER';
                    }
                    tx.executeSql(
                        `ALTER TABLE form_data ADD COLUMN ${type} ${sqlType}`,
                        [],
                        () => console.log(`新增列${type}成功`),
                        (tx, err) => console.error('加列失败:', err.message)
                    );
                }
            },
            (tx, err) => console.error('查表结构失败:', err.message)
        );
    });
}

3. 添加提交按钮并实现数据插入 #

给表单加个提交按钮，再写个函数收集所有元素的值插入数据库：

先在HTML的form里加按钮：

<!-- 放在<span id="fooBar"></span>后面 -->
<input type="button" value="提交表单" onclick="submitFormData()" />

然后实现提交函数：

function submitFormData() {
    const formElements = document.getElementById('fooBar').querySelectorAll('input, textarea');
    let columns = [];
    let placeholders = [];
    let values = [];

    formElements.forEach(element => {
        const name = element.name;
        let value;

        // 处理不同元素的取值逻辑
        if (element.type === 'checkbox') {
            value = element.checked ? 1 : 0;
        } else if (element.type === 'radio') {
            // 单选框要找同组里选中的那个
            const radioGroup = document.querySelectorAll(`input[name="${name}"]`);
            value = 0;
            radioGroup.forEach(radio => {
                if (radio.checked) value = 1;
            });
        } else if (element.tagName === 'TEXTAREA') {
            value = element.value;
        } else {
            value = element.value;
        }

        columns.push(name);
        placeholders.push('?');
        values.push(value);
    });

    if (columns.length === 0) {
        alert('先添加点表单元素呀');
        return;
    }

    // 执行插入SQL
    db.transaction(function(tx) {
        const sql = `INSERT INTO form_data (${columns.join(', ')}) VALUES (${placeholders.join(', ')})`;
        tx.executeSql(
            sql,
            values,
            (tx, result) => {
                alert(`数据存好了，记录ID是${result.insertId}`);
                // 可选：清空表单
                document.getElementById('fooBar').innerHTML = '';
            },
            (tx, err) => console.error('存数据失败:', err.message)
        );
    });
}

额外提醒 #

• WebSQL其实已经被W3C废弃了，虽然现在多数浏览器还支持，但新项目建议用IndexedDB，它是标准的浏览器端存储方案。
• 动态加列的方式虽然能实现需求，但SQL设计上不算最优。如果表单元素类型多、变化大，建议用键值对表存储：比如一个表存表单ID，另一个表存每个字段的键和值，这样不用改表结构，扩展性更强。举个例子：

  CREATE TABLE IF NOT EXISTS forms (id INTEGER PRIMARY KEY AUTOINCREMENT);
  CREATE TABLE IF NOT EXISTS form_fields (id INTEGER PRIMARY KEY AUTOINCREMENT, form_id INTEGER, field_name TEXT, field_value TEXT);
  

内容的提问来源于stack exchange，提问作者HIREN