javascript - 如何动态插入HTML代码？

Question

有 2 种类型(个人和公司)。我成功地为个人编写了代码，但现在我想为公司做同样的事情。

所以我尝试使用

<%
    for(int k=0;k<clientTypes.length;k++) {
%>

在顶部制作与“Individual”中完全相同的内容。

我的问题是，在公司时，id 日期 和月-年 在我的 JavaScript 中不起作用。这是有道理的，因为我不能重复 id(对吗？)。那么如何动态添加这个呢？ clientTypes 可以扩展。

<div class="row types" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-justified">
        <%
            String[] clientTypes = {"Individual","Corporation"};

            for(int k=0;k<clientTypes.length;k++) {
        %>
        <li><a data-toggle="tab" id="typeTab" name="type" href="#<%=clientTypes[k]%>"><%=clientTypes[k]%></a></li>
        <%
            }
        %>
    </ul>
</div>
    <div class="row" style="margin-top: 30px;">
    <div class="tab-content">
        <%
            for(int k=0;k<clientTypes.length;k++) {
        %>
        <div id="<%=clientTypes[k]%>" class="tab-pane fade in active">
            <div class="col-md-6">
                <div class="row">
                    <%
                        String initialDayEnd = session.getAttribute("initialDayEnd").toString();
                        String finalDayEnd = session.getAttribute("finalDayEnd").toString();

                        DateFormat format = new SimpleDateFormat("dd/MM/yyyy", Locale.US);

                        Calendar beginCalendar = Calendar.getInstance();
                        Calendar finishCalendar = Calendar.getInstance();

                        try {
                            beginCalendar.setTime(format.parse(initialDayEnd));
                            finishCalendar.setTime(format.parse(finalDayEnd));
                        } catch (ParseException e) {
                            e.printStackTrace();
                        }
                        List<String> dateList = new ArrayList<String>();
                        List<String> dateListMonthYear = new ArrayList<String>();
                        String[] dateSplitted;
                        while (beginCalendar.before(finishCalendar)) {
                            // add one month to date per loop
                            String date = format.format(beginCalendar.getTime()).toUpperCase();
                            System.out.println(date);
                            beginCalendar.add(Calendar.MONTH, 1);
                            dateSplitted = date.split("/");
                            dateList.add(dateSplitted[0] + "/" + dateSplitted[1] + "/" + dateSplitted[2]);
                            dateListMonthYear.add(dateSplitted[1] + "/" + dateSplitted[2]);

                        }
                    %>
                        <label>Date:</label>
                        <select id="dates" name="dates">
                            <%
                                for (int i=0;i<dateList.size();i++) {
                            %>
                            <option value="<%=dateList.get(i)%>"><%=dateListMonthYear.get(i)%></option>
                            <%
                                }
                            %>
                        </select>
                    </div>
                <div class="row" style="margin-top: 20px">
                    <h1 id="month-year"></h1>
                </div>
            </div>
            <div class="col-md-6">
                <label>Repeat For All:</label>
                <input class="inline-block text-center" type="number" id="repeatForAll" value="0">
            </div>
        </div>
        <%
            }
        %>
    </div>
    </div>

JavaScript

  $('#dates').change(DatesChanged);
    DatesChanged();

   function DatesChanged() {
       var date = $('#dates').val();
       var splitDate = date.split("/");
       day = splitDate[0];
       month = splitDate[1];
       year = splitDate[2];
       var maxDays = daysInMonth(month, year);
       var array = CreateJSONArray(maxDays, date);
   }
function DisplayTable(data) {

        //heading
        document.getElementById("month-year").innerHTML = data[0].monthName + ", " + data[0].year;

        //Table
        $('#dayTableBody').empty();
       $.each(data, function(key,value) {
           data += '<tr align="center">';
           data += '<td>' + value.dayNumber + '<input type="hidden" name="dayNumber" value="'+value.dayNumber +'">' + '</td>';
           data += '<td>' + value.dayName + '</td>';
           data += '<td>' + '<input class="text-center" type="number" value="0" id="numberOfClients" name="amountOfClients"> ' + '</td>';
           data += '</tr>';
       });
       $('#dayTableBody').append(data);

    }

Answer 1

使用 id="dates-<%=clientTypes[k]%>"和 id="month-year-<%=clientTypes[k]%>"

在 javascript 中，使用 class 而不是 id。

<select id="dates" name="dates" class="dates">

并在 JavaScript 选择器中使用

$('.dates')

而不是

$('#dates')