Question

我的表中填充了数据库中的项目。有一个列“勾选”每个项目，它调用数据库将该项目的状态更改为“有效” - 该部分有效。为了节省我不得不刷新页面，我想在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/

Answer 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问题。

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

1 个答案: