使用JQuery

Question

我有下表，这是AJAX调用的结果。

表中的每一行都指的是数据库中具有语言和页数的文档。可以为每个文档更改页数，也可以从表中删除文档。

在表的末尾，我有一个文本输入，其中包含每种语言的总页数。

我想要完成的是：当更改文档的页数时，更新相应语言的总页数。此外，删除文档时需要更新总页数。

<table id="documents">
    <thead>
        <tr>
            <td>Name</td>
            <td>Owner</td>
            <td>Language</td>
            <td>Pages</td>
            <td>Price</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr class="doc_item" data-language-id="1">
            <td>Lorem ipsum dolor sit amet</td>
            <td>John Smith</td>
            <td>English</td>
            <td><input type="text" name="pages[]" value="3" class="doc_pages"></td>
            <td>25 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="1">
            <td>Quisque egestas dui ac luctus efficitur</td>
            <td>Jane Watham</td>
            <td>English</td>
            <td><input type="text" name="pages[]" value="12" class="doc_pages"></td>
            <td>40 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="1">
            <td>Nam mattis sem vel est tristique congue ut sit amet nulla</td>
            <td>Eric Stevenson</td>
            <td>English</td>
            <td><input type="text" name="pages[]" value="2" class="doc_pages"></td>
            <td>20 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="2">
            <td>Lorem ipsum dolor sit amet</td>
            <td>Ian Young</td>
            <td>German</td>
            <td><input type="text" name="pages[]" value="6" class="doc_pages"></td>
            <td>50 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="3">
            <td>Lorem ipsum dolor sit amet</td>
            <td>Matt Jobs</td>
            <td>Rusian</td>
            <td><input type="text" name="pages[]" value="9" class="doc_pages"></td>
            <td>40 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr>
            <td colspan="6">
                <input type="text" class="pages_per_language" data-language-id="1" value="17">
                <input type="text" class="pages_per_language" data-language-id="2" value="6">
                <input type="text" class="pages_per_language" data-language-id="3" value="9">
            </td>
        </tr>
    </tbody>
</table> 

现在我很难按类和属性选择正确的语言输入。正如你在小提琴中看到的那样，当输入被改变时，我遍历所有可用的输入并尝试找到新的页面总和，然后将该值设置为输入的总页数。

$(document).ready(function() {
    var new_total_per_language = 0;

    $('.delete').on('click', function() {

    });

    $('.doc_pages').on('change', function() {
        // Get the language id for the changed document
       var document_language_id = $(this).closest('tr').data('language-id');

        // Find all documents with the same language-id and sum the number of pages         
        $('#documents tr.doc_item').each(function(index, value) {
            $tr = $(this);
            if ($tr.data('language-id') == document_language_id) {
                new_total_per_language += $('input .doc_pages').val();
            }
        });

        // Set the new total in the coresponding input
        $('.pages_per_language[language-id='"+document_language_id+"']').val(new_total_per_language);
    });
});

jsFiddle

Answer 1

看看这一行：

new_total_per_language += $('input .doc_pages').val();

首先，您正在寻找带有子元素的输入，这是不可能的。其次，你不选择TR中的输入，你选择所有输入

new_total_per_language += $tr.find('input.doc_pages').val();

您还要重置new_total_per_language，以便每次迭代时总计会增加。

您也可以这样做

var total = 0;
$('tr.doc_item[data-language-id="'+ document_language_id + '"] input.doc_pages').each( function () {
   total += Number(this.value);
});

$('.doc_pages').on('change', function() {
       
       var document_language_id = $(this).closest('tr').data('language-id');

  var total = 0;
$('tr.doc_item[data-language-id="'+ document_language_id + '"] input.doc_pages').each( function () {
   total += Number(this.value);
});

        $('input[data-language-id="'+document_language_id+'"]').val(total);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="documents">
    <thead>
        <tr>
            <td>Name</td>
            <td>Owner</td>
            <td>Language</td>
            <td>Pages</td>
            <td>Price</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr class="doc_item" data-language-id="1">
            <td>Lorem ipsum dolor sit amet</td>
            <td>John Smith</td>
            <td>English</td>
            <td><input type="text" name="pages[]" value="3" class="doc_pages"></td>
            <td>25 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="1">
            <td>Quisque egestas dui ac luctus efficitur</td>
            <td>Jane Watham</td>
            <td>English</td>
            <td><input type="text" name="pages[]" value="12" class="doc_pages"></td>
            <td>40 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="1">
            <td>Nam mattis sem vel est tristique congue ut sit amet nulla</td>
            <td>Eric Stevenson</td>
            <td>English</td>
            <td><input type="text" name="pages[]" value="2" class="doc_pages"></td>
            <td>20 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="2">
            <td>Lorem ipsum dolor sit amet</td>
            <td>Ian Young</td>
            <td>German</td>
            <td><input type="text" name="pages[]" value="6" class="doc_pages"></td>
            <td>50 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr class="doc_item" data-language-id="3">
            <td>Lorem ipsum dolor sit amet</td>
            <td>Matt Jobs</td>
            <td>Rusian</td>
            <td><input type="text" name="pages[]" value="9" class="doc_pages"></td>
            <td>40 USD</td>
            <td><a class="delete">Delete document</a></td>
        </tr>
        <tr>
            <td colspan="6">
                <input type="text" class="pages_per_language" data-language-id="1" value="17">
                <input type="text" class="pages_per_language" data-language-id="2" value="6">
                <input type="text" class="pages_per_language" data-language-id="3" value="9">
            </td>
        </tr>
    </tbody>
</table>