javascript - Jquery Ajax 改变 html 表的内容

Question

在这里我希望你为这个问题提供帮助，我在jsp页面中有一个表可以从服务器加载数据，但我的问题是，当我在输入文本框中输入数字并按回车键时，我想加载来自服务器(servlet)的新数据列表，并使用 jquery ajax 和 json 更改同一行的内容。这是我的代码。

<script src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $('.name1').keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            var name = $(this).find('td:eq(0)').html();
            var kwd=$(this).val();
            var name=$(this).parent().parent().find('td:eq(0)').html();

            $.get('showRate',{name:name,kwd:kwd},function(responseJson) {
                if(responseJson != null) {
                    $.each(responseJson,function(key,value) {
                        alert(responseJson);
                    });             
                }
            });
        }
    });
});
</script>
<form action="showKwh" method="POST">
    <input type="submit" value="show"/>
    <table id="adminTable" class="detailsTable">
        <tr class="header">
            <th colspan="4">Kilowat Entry</th>
        </tr>

        <tr class="tableHeading">
            <td>customer id</td>
            <td>name</td>

            <td>group</td>
            <td>kwh</td>

            <td>faraq</td>
            <td>lacag</td>
            <td>tax</td>
            <td>normal</td>
            <td>abnormal</td>
            <td>kwd</td>
        </tr>

        <c:forEach  var="cust" items="${customerKwh}" varStatus="iter">
            <tr class="${((iter.index % 2) == 1) ? 'lightBlue' : 'white'} tableRow">
                <td>${cust.id}</td>
                <td >${cust.name}</td>
                <td >${cust.type}</td>

                <td >${cust.kwh}</td>

                <td></td>
                <td></td>
                <td></td>
                <td>5</td>
                <td>1</td>
                <td><input type="text" name="txt"  value="" class="name1"/></td>
            </tr>
        </c:forEach>
    </table>
</form>

Answer 1

需要对您的 JS 代码进行一些小修改。实际上，在第一次获取名称时，您正在尝试在 INPUT 本身中查找 td，并且我猜您想找到该 TR 的第一个 TD。

问题是，您再次声明var name。虽然它应该可以正常工作，因为它是这样写的。

这是更新的代码:

$(document).ready(function () {
    $('.name1').keypress(function (event) {

        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            var kwd = $(this).val();
            var name = $(this).closest("tr").find('td:eq(0)').text();

            $.get('showRate', {
                name : name,
                kwd : kwd
            }, function (responseJson) {
                if (responseJson != null) {
                    $.each(responseJson, function (key, value) {

                        alert(responseJson);
                    });
                }
            });
        }
    });
});

如果仍然不起作用，则 ajax URL 可能存在问题。您可以在浏览器检查器中的网络上检查相同的内容。