Question

该代码是从jsfiddle复制而来的，但是无法在我的网页上运行。我试图在底部添加脚本并添加了document.ready函数

JSfiddle中的代码

HTML

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>




       <form>
    <table border = "1" id = "engagements">
        <tr>
            <th><input type="checkbox" onclick="checkAll(this)"></th>
            <th>Organization</th>
            <th>Project</th>
            <th>Product</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td><input type="checkbox" onclick="checkAll(this)"></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <!--
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            -->
        </tr>
    </table>

    <select name = "mode" id = "mode" onchange="addrow('engagements')">
        <option value="">Add More Rows with Same Data as Above</option>
        <option value="1">1 More</option>
        <option value="2">2 More</option>
        <option value="3">3 More</option>
        <option value="4">4 More</option>
        <option value="5">5 More</option>
     </select>

</form>

</body>
</html>

网页错误

newhtml.html：43 Uncaught ReferenceError：未定义addrow 在HTMLSelectElement.onchange（newhtml.html：43）

    <script src="jquery-3.3.1.min.js">
            $(document).ready(function() {
           $("#mode").on('change', function () {
    var rows = parseInt(this.value);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
}); 
            }      
</script>

任何帮助将不胜感激

Answer 1

可能是您没有正确导入jquery，并且您在注释中添加了相同的脚本标签

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    console.log(rows);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <table border="1" id="engagements">
        <tr>
            <th>
                <input type="checkbox" onclick="checkAll(this)" />
            </th>
            <th>Organization</th>
            <th>Project</th>
            <th>Product</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" onclick="checkAll(this)" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>
    <select name="mode" id="mode">
        <option value="">Add More Rows with Same Data as Above</option>
        <option value="1">1 More</option>
        <option value="2">2 More</option>
        <option value="3">3 More</option>
        <option value="4">4 More</option>
        <option value="5">5 More</option>
    </select>
</form>

Answer 2

更改“组合框”选项时，您只是声明了未定义就调用函数“ addrow”。

Answer 3

像这样使用jquery之前，必须在单独的脚本标签中引用jquery。然后在另一个脚本标签中的下方添加您的代码

    <script>
            $(document).ready(function() {
           $("#mode").on('change', function () {
    var rows = parseInt(this.value);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
}); 
            }      
</script>

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
       $("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
    lastRow = $('#engagements tr').last().clone();
    $('#engagements tr').last().after(lastRow);
}
     }); 
           });


</script>

JavaScript代码可在JSFiddle中使用，但不能在我的页面上使用

4 个答案: