具有多行表格的 begingform

Posted 2023-05-08

【中文标题】具有多行表格的 begingform

【英文标题】：begingform with multiple rows of a table

【发布时间】：2021-10-26 18:52:30

【问题描述】：

欢迎 我在数据库中有两个表：- 第一种：针对同一任务 第二：对于任务部分

如何提交包含任务的表单，以及任务部分的列表：

        $('#btn_create_Mission').click(function () 
            var t = $("#Table_Missions tbody")
            var l = '<tr>';
            l += '<td hidden=hidden">';
            l += '<input name= "ID_Mission_Detalis" id="td_ID_Mission_Detalis" type="text" value="0" />';
            l += '</td>';

            l += '<td>';
            l += '<input name= "Text_Mission" id="td_Text_Mission" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<input name= "Value_Mission" id="td_Value_Mission" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<button id="btn_delete_mission" type="button">DELETE PART MISSION</button>';
            l += '</tr>';
            t.append(l);
        

        )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Programe/Save_Mission" method="post">    <table>
        <tr>
            <td>
                ID Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

        <tr>

            <td>
                Name Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

    </table>
    <br />
    <button type="button" id="btn_create_Mission" class="btn btn-success">CREATE PART MISSION</button>
    <br />
    <table id="Table_Missions">
        <thead>
            <tr>
                <th>NAME PART MISSION</th>
                <th>VALUE PART MISSION</th>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>
    <input type="submit" value="SAVE ALL" />
</form>

我希望当我按下全部保存按钮时，它会发送表单，并且它还包含任务部件列表

我希望代码和问题很清楚，因为我想用（任务的部分）发送（任务）

【问题讨论】：

你能分享一下/Programe/Save_Mission 接受的模型吗？

控件中没有写代码，我只是想要一种方式来访问控件的数据。谢谢

【参考方案1】：

请根据您的要求检查更新的代码

有几件事是亮点：

创建了删除部分任务的 Delete 方法 创建保存方法，您可以在其中创建对象然后发布该对象

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Programe/Save_Mission" method="post">    <table>
        <tr>
            <td>
                ID Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

        <tr>

            <td>
                Name Mission :
            </td>
            <td>
                <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
                
            </td>
        </tr>

    </table>
    <br />
    <button type="button" id="btn_create_Mission" class="btn btn-success">CREATE PART MISSION</button>
    <br />
    <table id="Table_Missions">
        <thead>
            <tr>
                <th>NAME PART MISSION</th>
                <th>VALUE PART MISSION</th>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>
    <input type="button" value="SAVE ALL" onclick="clickSubmit();" />
</form>

javascript

var i = 0;

$('#btn_create_Mission').click(function () 
            var t = $("#Table_Missions tbody")
            var l = '<tr id="trPart' + i + '">';
            l += '<td hidden=hidden">';
            l += '<input id="td_ID_Mission_Detalis' + i + '" type="text" value="0" />';
            l += '</td>';

            l += '<td>';
            l += '<input id="td_Text_Mission' + i + '" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<input id="td_Value_Mission' + i + '" type="text" />';
            l += '</td>';
            l += '<td>';
            l += '<button id="btn_delete_mission' + i + '" type="button" onclick="deletePart('+i+')">DELETE PART MISSION</button>';
            l += '</tr>';
            t.append(l);
            i=i+1;
        

        )
        
        function deletePart(position)
            $("#trPart"+position).remove();
        
        
        function clickSubmit()
        var result =idMission: $("#Name_Mission").val(),nameMission:$("#Name_Mission").val(), parts:[];
        for(j=0;j<i;j++)
        if($("#td_Text_Mission"+j) != undefined && $("#td_Text_Mission"+j).val() != undefined)
            var partVal = 
          namePartMission:$("#td_Text_Mission"+j).val(),
          valPartMission:$("#td_Value_Mission"+j).val()
          ;
          result.parts.push(partVal);
          
        
        console.log(result);