php - 拉维尔 5 : Dynamic Array in Request

Question

我有一个包含三个输入值和一个“添加”按钮的表格。当按下“添加”按钮时，输入值将“保存”到该行中，并生成一个新行。提交表单后，我要做的是以数组格式获取输入的每一行。但是，请求要么只获取最新的行(无论如何都没有添加)，要么根本不获取任何内容。我做错了什么？

我的代码，供引用:

<table id="data_table" class="table table-striped table-responsive">
    <thead>
        <tr>
            <th>Company Name</th>
            <th>Years at Company</th>
            <th>Months at Company</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="no-leftpad"><input type="text" id="new_name" class="length"></td>
            <td>                                                                                 
                <select id="new_years" class="form-control">
                    <option value="-">-</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>                                    
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10+</option>
                </select>
            </td>
            <td>

                <select id="new_months" class="form-control">
                    <option value="-">-</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                </select>
            </td>
            <td>
                <input type="button" class="add" onclick="add_row();" value="Add">
            </td>
        </tr>
    </tbody>
</table>

....

function add_row() {
    var new_companyname=document.getElementById("new_name").value;
    var new_years=document.getElementById("new_years").value;
    var new_months=document.getElementById("new_months").value;

    var table=document.getElementById("data_table");
    var table_len=(table.rows.length)-1;
    var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'>"
                 +"<td id='companyname_row"+table_len+"'>"
                 +"<input type='text' name='company_name["+table_len+"][company_name]' value='"+new_companyname+"' disabled>"
                 +"</td>"
                 +"<td id='years_row"+table_len+"'>"
                 +"<input type='text' name='company_years["+table_len+"][company_years]' value='"+new_years+"' disabled>"
                 +"</td>"
                 +"<td id='months_row"+table_len+"'>"
                 +"<input type='text' name='company_months["+table_len+"][company_months]' value='"+new_months+"' disabled>"
                 +"</td>"
                 +"<td>"
                 +"<a type='button' value='Delete' class='fa fa-trash-o delete' onclick='delete_row("+table_len+")'></a></td></tr>";

    document.getElementById("new_companyname").value="";
    document.getElementById("new_years").value="";
    document.getElementById("new_months").value="";
}

Answer 1

函数 add_row() 中似乎有错别字:

document.getElementById("new_companyname").value="";

应该是:

document.getElementById("new_name").value="";

此外，如果你想暂时保留行，可以将其推送到函数 add_row() 中的数组，例如:

var companyList = [];

function add_row() {
...

companyList.push({
  companyName:new_companyname,
  yearsAtCompany:new_years,
  monthsAtCompany:new_months
});

...

}