Javascript 代码在 JSFiddle 中有效但在我的页面中无效

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 is not defined 在 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

当 'combo box' 选项改变时，您只是在没有定义的情况下声明调用函数 'addrow'。

Answer 3

您必须在单独的脚本标记中引用 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 中有效但在我的页面中无效

Javascript code working in JSFiddle but not in my page

javascript

jsfiddle