javascript - 从动态表创建数组

Question

如何从此表/表单创建数组？动态表中的 onclick 函数 formData() 只返回一个串联的字符串。我需要使用“设备”变量作为键在 JSON 中创建一个关联数组，但是我将满足于任何类型的数组。很明显，我不是很擅长这个……

function createInputTable() 
    {
    var num_rows = document.getElementById('rows').value;
    var tableName = document.getElementById('conn_input_device').value;
    var column_number = 2;
    var tdefine = '<form id="form"><table id="table" border = "1">\n';
    var theader = '<tr><th>No</th><th>Input</th><th>Output</th></tr>\n';
    var caption = '<caption><input id="device" value ="' + tableName + '" /></caption>';
    var tbody = '';
    var tfooter = '</table>';
    var createNewDevice = '<button onclick="formData();">Form Data</button></form>'
    var i = 0;                  

    for (var i= 0; i < num_rows; i++)
      {
      tbody += '<tr><td>' + (i+1)  + '</td><td><input class="cell" id="i'+ i + '" type = "text"/></td>';
      tbody += '<td><input class="cell" id="o'+ i + '" type="text"/></td></tr>\n';
      }
      document.getElementById('wrapper').innerHTML = caption + tdefine + theader + tbody + tfooter + createNewDevice;
      
    }
    
    
    function formData()
    {
        var cellData = document.getElementById("form");
        //var device = document.getElementById('device').value;
        //var j;
        var obj = [];
        for(j=0; j< cellData.length; j++)
        {
            obj += cellData[j].value;
        }
        var json = JSON.stringify(obj);
        alert (json);
        //document.getElementById('result').innerHTML = json;
    }

    <form id="tableGen" name="table_gen">
        <label>Connecting device: <input type = "text" name = "conn_input_device" id = "conn_input_device"/></label><br />
        <label>Number of inputs: <input type="text" name="rows" id="rows"/></label><br />
        <input name="generate" type="button" value="Create Input Table!" onclick='createInputTable();'/>
    </form>

    
    <div id="wrapper"></div>

标签： javascriptarrays

Answer 1

1）这是我的答案，如何在VueJS 和 jQuery上执行此操作

2)原版js - CODEPEN - 演示

// Get DOM elements
const $el = [
    '#tmpl',
    '#user-count',
    '#people-count',
    '#form-items',
    '#btn-add',
    '#form',
].reduce((res, item) => {
    const method = item.startsWith('#')
        ? 'querySelector'
        : 'querySelectorAll'
    const key = item
        .replace(/\W/ig, ' ').trim()
        .replace(/\s+\w/g, v => v.trim().toUpperCase())
    res[key] = document[method](item)
    return res
}, {})

// Variable for dynamic template
const tmpl = $el.tmpl.innerHTML.trim()

// Click on Add new button
$el.btnAdd.addEventListener('click', () => {
    const peopleCount = +$el.peopleCount.value
    const html = Array(peopleCount)
            .fill(tmpl)
            .join('')
    $el.formItems.insertAdjacentHTML('beforeend', html)
})

// Submit form
$el.form.addEventListener('submit', e => {
    e.preventDefault()
    alert('Submit form by ajax or remove this method for default behavior')
})

// Add form click (it's need for dynamic handler on child elements)
$el.form.addEventListener('click', e => {
    // Delete behaviors
    if (e.target.classList.contains('btn-del') && confirm('Are you sure?')) {
        e.target.closest('.row').remove()
    }
})

<div id="app">
    <div>
        <div>
            <button id="btn-add">Add new user</button>
            <label>Number of People:</label>
            <input type="number" id="people-count" value="1" min="1">
        </div>
        <form id="form">
            <div id="form-items" data-empty="Users list is empty"></div>
            <button>Send</button>
        </form>
    </div>
</div>

<script type="text/x-template" id="tmpl">
    <div class="row">
        <label>
            Name:
            <input class="people" name="name[]">
        </label>
        <label>
            Surname:
            <input class="people" name="surname[]">
        </label>
        <label>
            Email:
            <input type="email" class="people" name="email[]">
        </label>
        <button class="btn-del">Delete</button>
    </div>
</script>

<style>
    .people {
        width: 80px;
    }
    #form-items:empty + button {
        display: none;
    }
    #form-items:empty:before {
        content: attr(data-empty);
        display: block;
    }
</style>