Question

我已将数据表合并到我的表中。但是，当页面缩小时，我无法单击时间/周和备注。它在整页上完美运行。

知道如何解决这个问题吗？

每次用户点击添加新行时，都会触发以下代码。

$("#addNew").click(function (e) {
            $.ajax({
                url: "/AssignExercisesViewModel/InitialiseExercises",
                datatype: "json",
                traditional: true,
                success: function (result) {

                    if (rowCount <= 9) {
                        // $('#TempTable4').append(html);
                        var index = '<tr style="border:1px solid black" class="exercise-records"><td>&nbsp;&nbsp;&nbsp;' + (rowCount + 1) + '&nbsp;&nbsp;</td>'

                        var tblRow = '<td><select class="form-control" data-val="true" data-val-number="The field ExerciseRegionID must be a number." id=ddlRegion' + rowCount + ' name=[' + rowCount + '].ExerciseRegionID><option value="">Select an Exercise Region</option>';
                        for (var i = 0; i < result.data.length ; i++) {
                            tblRow += '<option value= ' + result.data[i].Value + '>' + result.data[i].Text + '</option>';
                        }

                        var tblRow1 = '</td><td><select class="form-control" data-val="true" data-val-number="The field ExerciseTypeID must be a number." id=ddlType' + rowCount + ' name=[' + rowCount + '].ExerciseTypeID><option value="">Select an Exercise Type</option>'
                        for (var i = 0; i < result.data2.length; i++) {
                            tblRow1 += '<option value=' + result.data2[i].Value + '>' + result.data2[i].Text + '</option>'
                        }

                        var tblRow2 = '</td><td><select class="form-control" data-val="true" data-val-number="The field ExerciseID must be a number." data-val-required="The ExerciseID field is required." id=ddlExercise' + rowCount + ' name=[' + rowCount + '].ExerciseID><option value="">Select an Exercise</option><option value="">Select an Exercise</option>'
                        for (var i = 0; i < result.data3.length; i++) {
                            tblRow2 += '<option value=' + result.data3[i].Value + '>' + result.data3[i].Text + '</option>'
                        }

                        var tblRow3 = '</td><td><select class="form-control" data-val="true" data-val-number="The field Number_Of_Reps must be a number." data-val-required="The Number_Of_Reps field is required." name=[' + rowCount + '].Number_Of_Reps><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>' +
                        '<option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option>' +
                        '<option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option></select></td>'

                        var tblRow4 = '<td><select class="form-control" data-val="true" data-val-number="The field Number_Of_Secs_PositionHold must be a number." data-val-required="The Number_Of_Secs_PositionHold field is required." name=[' + rowCount + '].Number_Of_Secs_PositionHold><option value="0">0 secs</option><option value="5">5 secs</option><option value="10">10 secs</option>' +
                        '<option value="15">15 secs</option><option value="20">20 secs</option><option value="25">25 secs</option><option value="30">30 secs</option></select></td>'

                        var tblRow5 = '<td><select class="form-control" data-val="true" data-val-number="The field Number_Of_Sets_Per_Day must be a number." data-val-required="The Number_Of_Sets_Per_Day field is required." name=[' + rowCount + '].Number_Of_Sets_Per_Day><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>' +
                        '<option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></td>'

                        var tblRow6 = '<td><select class="form-control" data-val="true" data-val-number="The field Frequency_Per_Week must be a number." data-val-required="The Frequency_Per_Week field is required." name=[' + rowCount + '].Frequency_Per_Week><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>' +
                        '<option value="6">6</option><option value="7">7</option></select></td>'

                        var tblRow7 = '<td><textarea class="form-control" cols="20" name=[' + rowCount + '].Remark rows="2"></textarea></td></tr>'


                        tblRow += '</select>';
                        tblRow += '</td>';
                        tblRow1 += '</select>';
                        tblRow1 += '</td';
                        tblRow2 += '</select>';
                        tblRow2 += '</td>';
                        tblRow3 += '</select>';
                        tblRow3 += '</td>';
                        tblRow4 += '</select>';
                        tblRow4 += '</td>';
                        tblRow5 += '</select>';
                        tblRow5 += '</td>';
                        tblRow6 += '</select>';
                        tblRow6 += '</td>';
                        tblRow7 += '</select>';
                        tblRow7 += '</td>';
                        oTable.fnAddData([
                            index,
                            tblRow,
                            tblRow1,
                            tblRow2,
                            tblRow3,
                            tblRow4,
                            tblRow5,
                            tblRow6,
                            tblRow7
                        ]);

                    }
                    rowCount++;
                }
            });

这是触发上述代码的按钮。

<a class="btn btn-success btn-xs" href="#" id="addNew">
    <i class="glyphicon glyphicon-plus"></i>
    Add Exercise
</a>

这是我将表声明为数据表的部分。

    $(document).ready(function () {
        $('#TempTable2').DataTable({
            responsive: true,
            "order": [[0, "desc"]]
        });
    });

下面是无效的下拉框图片。

页面缩小时无法单击下拉列表（数据表响应）

0 个答案: