jquery - jQuery选择带有变量的元素

Question

我正在尝试使用 JQuery 来接收由名称值和分数值组成的响应。该代码应该将响应名称与显示分数的表中的名称匹配，然后更新该名称表行中的分数单元格。问题是，我不知道如何选择表格元素。

这是功能：

function rollBall() {
var pins = $('#pins').val();
        $.ajax({
            type: "POST",  
            url: "/ajaxjqjsbowling/play.htm",  
            data: "pins=" + pins,  
            success: function(response){
                if(response.status == "SUCCESS"){
                    var cname = response.result.currPlayName;
                    var cscore = response.result.currPlayScore;

                $("td#plName [name = cname] + td#plScore").replaceWith('' + cscore);
            }

        },  
        error: function(e){  
          alert('Error: ' + e);  
        }  
      });
}

这是表格代码：

<table id = "playerslist">
    <c:forEach var="player" items="${players}">
    <tr id = "htmlplayerno"><td> ${player.htmlPlayerNo}:</td><td id = "plName">${player.name}:</td><td id = "plScore" >0</td></tr>
    </c:forEach>
</table> 
<table>

谢谢阅读。

Answer 1

由于 id 是唯一的，为什么不只是：

$("#plScore").replaceWith('' + cscore);

Answer 2

您需要将您的字符串连接在一起，否则它将只是字符串"td#plName [name = cname] + td#plScore"。您还需要使用类，因为有多个玩家并且ids 需要是唯一的。

success: function(response){
    if (response.status == "SUCCESS") {
        var cname = response.result.currPlayName;
        var cscore = response.result.currPlayScore;

        $("td.plName:contains('" + cname + "') + td.plScore").html(cscore);
    }

HTML

<table id = "playerslist">
    <c:forEach var="player" items="${players}">
    <tr class="htmlplayerno"><td> ${player.htmlPlayerNo}:</td><td class="plName">${player.name}:</td><td class="plScore" >0</td></tr>
    </c:forEach>
</table> 

替代解决方案

这是另一种可能有效的方法。

HTML

<tr id="${player.name}" >
    <td class="plNo">${player.htmlPlayerNo}:</td>
    <td class="plName">${player.name}:</td>
    <td class="plScore">0</td>
</tr>

JS

$("#" + cname + " .plScore").html(cscore);

Answer 3

在 Html 中 id 是唯一的。如果您有多个 tr，则必须使用 class。

<tr id="${player.htmlPlayerNo}" >
  <td> ${player.htmlPlayerNo}:</td>
  <td class="plName" >${player.name}:</td>
  <td class="plScore" >0</td>
</tr>

然后

$("#" + ${player.htmlPlayerNo} + " td.plScore").html(cscore);