使用javascript删除项目并创建表

Question

在这个 wtform 中，我必须添加一组程序 ID、程序名称、程序描述。输入所有这些详细信息后，我必须单击计划按钮。单击后，表格将在页面底部创建。这些详细信息不存储在数据库中。它将被存储为一个列表。一旦我单击删除按钮，数据就必须从列表中删除，并且它也应该从表行中删除。所以我尝试了ajax并将数据传递给后端并从列表中删除了id并将其传递回前端。现在我尝试在 javascript 中创建一个表格，其中包含我在那里敲击的列表。有没有其他方法可以做到这一点？

<div>
    <form method="POST", action="">

        {{ form.csrf_token }}
        <fieldset class="form-group">
            <legend>Add Students</legend>

            <div class="form-group">
                {{form.program_id.label(class="col-sm-1 col-form-label")}}
                {{form.program_id(id="program_id")}}
            </div>
           
            <div class="form-group">
                {{form.program_name.label(class="col-sm-1 col-form-label")}}
                {{form.program_name(id="program_name")}}
            </div>
            <div class="form-group">
                {{form.program_description.label(class="col-sm-1 col-form-label")}}
                {{form.program_description(id="program_description")}}

            </div>         
           

            <div class="form-group" align ="justify">

                {{form.cancel(class="btn btn-outline-info")}}
                {{form.schedule(class="btn btn-outline-info")}}
            </div>

            <table class="table table" border =1 >
                <tr >
                    <th>ID</th>
                    <th>program_id</th>
                    <th>program_title</th>
                    <th>program_description</th>
                </tr>
                {% for program in all_programs %}
                <tr>
                    <td> {{program.program_id}}</td>
                    <td> {{program.program_title}}</td>
                    <td> {{program.program_description}}</td>

                    <td>

                    <input type="button" value="Remove" class="btn btn-danger" onclick="removeProgram(this)" data-program-id="{{program.program_id}}" data-program-list="{{program_list}}">
                    </td>

                </tr>
                {% endfor %}
            </table>

    </form>

    
    <script>
        function removeProgram(deleteaction){
            programId = deleteaction.getAttribute('data-program-id');
            programList = deleteaction.getAttribute('data-program-list');
            console.log("we are here", articleId,articleList)
            $.ajax({
                type:'POST',
                url:'/removeaprogram',
                data:{
                    'programid':programId,
                    'programlist':programList
                },
                success: function (data) {
                    console.log(data)  // display the returned data in the console.
                    let optionTable = '<table class="table table" border =1 ><tr ><th>ID</th><th>program_id</th><th>program_title</th><th>program_description</th></tr>';
                    for(each_data in data){
                        optionTable = "'<tr><td>'+{{each_data.program_id}}+'</td>''<td>'+{{each_data.program_title}}+'</td>'"
                    }
                

                   
          

            })

        }
    </script>



</div>

Answer 1

这不好有几个原因

for(each_data in data){
  optionTable = "'<tr><td>'+{{each_data.program_id}}+'</td>''<td>'+{{each_data.program_title}}+'</td>'"
}

1. = 不断分配任务
2. JavaScript 不使用 {{}}
3. 您实际上并未在任何地方插入表格 - 无需更改整个表格

你可能会有更好的运气

 document.querySelector(".table tbody").innerHTML = data
  .map(`<tr><td>${data.program_id}</td>
            <td>${data.program_title}</td>
        </tr>`).join("");                   

假设 JSON 响应为

[{"program_id":"ID1", "program_title":"Title 1"},
 {"program_id":"ID2", "program_title":"Title 2"}]

Answer 2

您可以将表格字符串创建为 HTML。循环中缺少关闭 tr 标记。循环结束后，您可以将其推送到任何 HTML 元素。

success: function (data) {
                    console.log(data)  // display the returned data in the console.
                    let optionTable = '<table class="table table" border =1 ><tr ><th>ID</th><th>program_id</th><th>program_title</th><th>program_description</th></tr>';
                    for(each_data in data){
                        optionTable = optionTable +  "'<tr><td>'+{{each_data.program_id}}+'</td>''<td>'+{{each_data.program_title}}+'</td></tr>'"
                    }
                    document.getElementById('tableArea').innerHTML = optionTable ; // Add table to HTML doc or any div or area
            })