单击同一行上另一个单元格中的链接时更改表格单元格中的文本答案

【问题标题】：Change text in table cell when link in another cell on the same row is clicked单击同一行上另一个单元格中的链接时更改表格单元格中的文本
【发布时间】：2018-03-28 13:12:09
【问题描述】：

我的表格中填充了数据库中的项目。有一列可以“勾选”每个项目，它调用数据库将该项目的状态更改为“有效” - 这部分有效。不过，为了让我不必刷新页面，我想在 ajax 调用之后更新页面上的文本，使其显示为“有效”而不是提交。实现此目的的正确代码是什么？我哪里错了？没有成功，我还试图让勾选后点击变为绿色。

<div class="form-group">
  <div class="row">
    <div class="table-responsive col-md-6">
      <h4><i class="glyphicon glyphicon-check"></i> Summary</h4>
      <hr />
      <table id="stationCount" class="table table-bordered table-hover">
        <tr>
          <th>ID</th>
          <th>Place</th>
          <th>Submission Date</th>
          <th>Status</th>
          <th>Confirm</th>
        </tr>
        <tr>
          <td>
            <p id="lblId" class="form-control-static" contenteditable="false">
              159
            </p>
          </td>
          <td>
            <p id="lblPlaceName" class="form-control-static" contenteditable="false">
              Somewhere
            </p>
          </td>
          <td>
            <input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_0__SurveyId" name="Items[0].SurveyId" value="159" />
            <p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="27/03/2018 11:04:47">
              27/03/2018
            </p>
          </td>
          <td class="status" id="159">
            <p asp-for="Submitted">
              Submitted
            </p>
          </td>
          <td>
            <a href='#' class='btn btn-default ConfirmLink' style="color: #808080 " data-url='/Controller/ValidateSurvey' data-id="159">
                                    <i class="fa fa-check"></i>
                                </a>
          </td>
        </tr>
        <tr>
          <td>
            <p id="lblId" class="form-control-static" contenteditable="false">
              3
            </p>
          </td>
          <td>
            <p id="lblPlaceName" class="form-control-static" contenteditable="false">
              Somewhere else
            </p>
          </td>
          <td>
            <input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_5__SurveyId" name="Items[5].SurveyId" value="3" />
            <p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="21/01/2018 00:00:00">
              21/01/2018
            </p>
          </td>
          <td class="status" id="3">
            <p asp-for="Submitted">
              Expired
            </p>
          </td>
          <td>
            <a href='#' class='btn btn-default ConfirmLink' style="color: #808080" data-url='/Controller/ValidateSurvey' data-id="3">
                                    <i class="fa fa-check"></i>
                                </a>
          </td>
        </tr>

      </table>

    </div>

  </div>

</div>

$(function() {
 //Document.ready//
 //link up event handler
 $(".ConfirmLink").click(function() {

   // Get the id from the link
   var recordToConfirm = $(this).attr("data-id");
   var postToUrl = $(this).attr("data-url");


   $.ajax(postToUrl, {
     type: "post",
     data: {
       "id": recordToConfirm
     },
     dataType: "json"
   }).done(function(data) {
     // Successful requests get here

   });

   if ($(this).css('color') === '#808080') {
     $(this).css('color', '#008000');
   } else {
     $(this).css('color', '#808080');
   }

   $("#" + recordToConfirm + " td.status").html('Valid');

 });
});

我已经设置了一个jsfiddle：

https://jsfiddle.net/a4zhpt7L/4/

【问题讨论】：

你用的是knockout还是jQuery？如果 jQuery 这里是一个工作小提琴...jsfiddle.net/a4zhpt7L/12
@maxshuty 谢谢，这很有帮助。但是，我更愿意将它放在 ajax 调用之后，这样我就可以将它实现到“成功”区域 - 只有在 ajax 调用成功时才变为绿色是有意义的。我主要关心的是在 ajax 运行后尝试让状态列文本更新为“有效”。非常感谢您的宝贵时间。
jsfiddle.net/a4zhpt7L/23 - 看看我的 cmets 并玩弄那个小提琴。
谢谢。我添加了$(this).closest('tr').children('td.status').children('p').text('Valid');，它可以更新状态列:)

标签： javascript jquery asp.net ajax asp.net-core

【解决方案1】：

要做你想做的一切，改变一些事情：

将if ($(this).css('color') === '#808080') 更改为if ($(this).css('color') == 'rgb(128, 128, 128)')，因为jQuery 返回的是RGB 代码而不是十六进制代码。
将$("#" + recordToConfirm + " td.status").html('Valid'); 更改为$("td.status#" + recordToConfirm).html('Valid');，因为td.status 放置不正确。

我希望这也能解决您的 ajax 问题。

【讨论】：