Question

我试图在使用javascript获取数据后在文本框中显示结果。

虽然数据库包含预期结果的多个条目，但我只能在一行中显示结果，并且脚本不会动态添加其他行。解决方案只需在javascript中实现。

＆＃13;

var data1 = "test";
$.ajax({
    url : "EmployeeTaskServlet",
    type : "POST",
    data : {data1: data1},
    success : function(result){
        var taskList = $.parseJSON(result);
        document.getElementById("campo1").value = (taskList[i].minorTaskName);
        document.getElementById("campo2").value = (taskList[i].estimatedTime);
        document.getElementById("campo3").value = (taskList[i].minorTaskDetails);
        alert(taskList[0].taskStatus);
        document.getElementById("number-tasks-2").innerHTML = ( + taskList.length);
        //document.getElementById('currentStatusDB').value = (document.getElementById('currentStatusInput').value);
        var count = taskList.length;
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="hide-row">
    <div class="col-lg-4 mb-1">
        <div class="card h-100 text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table style="border: none;" id="dynamic_field_time">
                        <tr>
                            <td style="border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo1" readonly/></td>
                            <td style="width: 20%;border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo2" readonly/></td>
                            <td style="border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo3" readonly/></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

您可以使用jQuery动态创建行，如下所示：

// jQuery variant
function createRow(row) {
    var tr = $('<tr>');
    tr.append($('<td>').text(row.minorTaskName));
    tr.append($('<td>').text(row.estimatedTime));
    tr.append($('<td>').text(row.minorTaskDetails));
    $('#dynamic_field_time').append(tr);
}

var data1 = "test";
$.ajax({
    url: "EmployeeTaskServlet",
    type: "POST",
    data: {data1: data1},
    success: function(result){
        var taskList = $.parseJSON(result);
        taskList.forEach(function (row) {
            createRow(row);
        });
    }
});

或者与香草JS：

function createCell(value) {
    var td = document.createElement('td');
    td.innerText = value;

    return td;
}

function createRow(row) {
    var tr = document.createElement('tr');
    tr.appendChild(createCell(row.minorTaskName));
    tr.appendChild(createCell(row.estimatedTime));
    tr.appendChild(createCell(row.minorTaskDetails));
    document.getElementById('dynamic_field_time').appendChild(tr);
}

Answer 2

您可以使用forEach功能迭代数组并创建新的模板字符串;

$.ajax({
    url: "EmployeeTaskServlet",
    type: "POST",
    data: {data1: data1},
    success: function(result){
        var taskList = $.parseJSON(result);
        var template = taskList.map( item => {
           return `<tr><td>${item.minorTaskName}</td><td>${row.estimatedTime}</td><td>${row.minorTaskDetails}</td></tr>`
        })

        document.getElementById("number-tasks-2").innerHTML = template;
    }
});

javascript获取数据时无法动态添加行

2 个答案: