Question

我有7个团队成员，我只能在id演示中显示其中1个，我怎样才能显示我的所有团队成员？ PFB HTML代码和javascript我正在使用的相同：

<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
                <div class="popup" onclick="myFunction()"><h6>My team</h6>
                    <span class="popuptext" id="myPopup">My team members:<br><h7 id="demo"></h7><br></span>
                </div>
        </div>
    </div>
        <ol class="breadcrumb"></ol>

        <script>
            // When the user clicks on <div>, open the popup
            function myFunction() {
            var popup = document.getElementById("myPopup");
            popup.classList.toggle("show");
            var data1 = "TEAMSEARCH";
            //alert(data1);             
            $.ajax({
                url : 'TeamAssignment',
                type : 'POST',
                data : {
                    data1 : data1
                },
                success : function(result) {
                     var memberList = $.parseJSON(result);
                     //alert ( "Returned rows " + memberList.length);
                     for (var i = 0; i < memberList.length; i++)
                        {
                           console.log(memberList[i].fullName );
                           document.getElementById("demo").innerHTML = memberList[i].fullName;
                       }
                }
            });
            }
        </script>

Answer 1

document.getElementById("demo").innerHTML = memberList[i].fullName

循环的每次迭代都会重写demo的整个innerHTML。你可能想要document.getElementById("demo").innerHTML += '<li>' + memberList[i].fullName + '</li>'

之类的东西

+=是实际重要的部分。

Answer 2

您反复覆盖demo innerHTML。您应该在for循环后立即进行分配。

尝试这样的事情：

var members = '';
for (var i = 0; i < memberList.length; i++) {
    console.log(memberList[i].fullName );
    members += memberList[i].fullName;
}
document.getElementById("demo").innerHTML = members;

Answer 3

你也可以使用下面一个：

var memberList = $.parseJSON(result); $("#demo").html('') // here just make empty innetHTML for(var member of memberList) $("#demo").append('<li>' + member.fullName + '</li>') // here appending html string of each member

无法动态显示所有行

3 个答案: