将数组从表行传递到 javascript答案

【问题标题】：Passing arrays from table rows to a javascript将数组从表行传递到 javascript
【发布时间】：2015-03-19 00:23:37
【问题描述】：

我使用 javascript 函数将行动态追加到表中。

添加行功能：

function addrow(tableid) {
    var tablename = document.getElementById(tableid);
    var rows = tablename.rows.length;
    if (rows < 8) {  //Maximum number of rows allowed
        var newrow = tablename.insertRow(rows);
        var col = tablename.rows[0].cells.length;
        for (var i=0; i<col; i++) {
            var newcell = newrow.insertCell(i);
            newcell.innerHTML = tablename.rows[0].cells[i].innerHTML;
        }
    }
    else {
        alert(" Maximum number of rows allowed is 8");
    }
}

HTML 代码（行结构）：

<tr>
<p>
  <td width="20%">
    <input class="input-group-lg" type="text" name="c_degree[]" style="width:90%"/>
  </td>
  <td width="25%">
    <input class="input-group-lg" type="text" name="c_specialization[]" style="width:90%" />
  </td>
  <td width="30%">
    <input class="input-group-lg" type="text" name="c_university[]" style="width:90%" />
  </td>
  <td width="15%">
    <input class="input-group-lg" type="number" name="c_year[]" min="1990" max="2015" />
  </td>
  <td width="10%">
    <input class="input-group-lg" type="number" name="c_marks[]" min="1" max="100" />
  </td>
</p>
</tr>

我需要将所有动态创建的行中的数据（这些数组）传递给 ajax 脚本（将其传递到后端）。

【问题讨论】：

将<p> 放入<tr> 无效。See this。 “一个<tr> 元素包含一个或多个<th> 或<td> 元素。” 所以基本上，您想知道如何获取所有这些动态数据，例如作为一个对象吗？这样你就可以将它传递给你的 Ajax 函数？
标签用于 css 目的（将尽快修复它）。我想将变量 c_degree[0]、c_degree[1] 等保存在 javascript 变量中（使用针对表中的行数运行的循环）并将 javascript 变量传递给 ajax 函数。
专门针对我的 qs 的快速修复是 link。

标签： javascript php html

【解决方案1】：

虽然使用 jQuery 可以很容易地从带有 $.serialize() 的表单中获取数据，但您必须在没有库的情况下完成一些工作。让我们创建自己的 serialize() 函数，我们可以像这样使用它：

var myFormData = serialize( "myForm" ); // returns an object

请注意，"myForm" 可以替换为任何容器，甚至是 "myTable"。

这是一个尝试：

function serialize(formID) {
    // New object you'll be building upon
    var obj = {},
        // Other variables we're going to use
        i,l,n,isArray,isNum,val;
    // Your form's inputs
    var inputs = document.getElementById(formID).getElementsByTagName('input');
    // For each of them
    for (i = 0, l = inputs.length; i < l; i++) {
        // Get their name
        n = inputs[i].getAttribute('name');
        // Is it an array?
        isArray = n.slice(-2) == '[]';
        // Is is of type "number"?
        isNum = inputs[i].getAttribute('type') == 'number';
        // What's the value?
        val = inputs[i].value;
        // If it's an array
        if (isArray) {
            // Get rid of the "[]"
            n = n.substring(0, n.length - 2);
            // If it's the first entry, create an empty array
            if (obj[n] === undefined) obj[n] = [];
            // Push the value in it (parsed as an integer if it's a number)
            obj[n].push(isNum ? +val : val);
            // If it's a single field, just assign it
        } else obj[n] = isNum ? +val : val;
    }
    // Return the object
    return obj;
}

JS Fiddle Demo (with random data)

请注意，此功能将与您提供的输入（“文本”和“数字”）一起使用，但需要完成才能与其他类型的输入一起使用，例如单选按钮、选择下拉菜单、文本区域等。需要额外的工作，但如果您不想重新发明轮子，您可能会在网络上找到一个完整的工作。

【讨论】：