Question

我是java的新手，所以请耐心等待。我从这个网站上获取了这段代码，但对于我的生活，我似乎无法让javascript实际运行。这是我的代码保存在一个html文件和一个php文件中（一旦我发现这个问题，它最终需要进入的文件格式）。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(function () {
    $('.my-table input[type=number]').on("input", function() {
        var tr  = $(this).closest('tr');
        var num = +tr.find('.numerator').text();
        var val = this.value;

        tr.find('.rowtotal').text('£'+ (val * num));
    });
});
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
            <td>Header 4</td>
        </tr>
    </thead>
    <tbody>
        <tr data-row-num="1">
        <td>Item 1</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 2</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 3</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>
    </tbody>
</table>
</body>
</html>

以下是使用代码段工具的代码，它运行得很好。那么我在这里做错了什么，当我将其保存为文件时，它无法正常工作？我猜这是代码本身的位置问题，虽然我已经尝试将它放在正文中，但我试图使用包含，甚至试图将它放入标题中。这些都没有显示出任何结果。有什么想法吗？

$(function() {
  $('.my-table input[type=number]').on("input", function() {
    var tr = $(this).closest('tr');
    var num = +tr.find('.numerator').text();
    var val = this.value;

    tr.find('.rowtotal').text('£' + (val * num));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
            <td>Header 4</td>
        </tr>
    </thead>
    <tbody>
        <tr data-row-num="1">
        <td>Item 1</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 2</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 3</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>
    </tbody>
</table>

无法让我的js运作

0 个答案: