Question

我有用户可以点击以解锁记录的表格。我想删除解锁按钮并替换为文本。例如，一旦他们点击解锁按钮将被删除，文本将显示为“记录已解锁”。我不确定为什么我当前的代码没有删除按钮。如果有人可以提供帮助，请告诉我。谢谢。

$('.unlockBtn').on('click',unlockRecord);

function unlockRecord(){
	var trID = $(this).parents("tr").prop('id');
	
	if(confirm("Are you sure you want to unlock this record?")){
		$.ajax({
			type: 'POST',
			url: 'Application.cfc?method=unlockRec',
			data: {'recID':trID},
		    dataType: 'json'
		}).done(function(obj){
			var numRecs = obj.RECORDCOUNT;
			
			if(obj.STATUS == 200){
				$('#' + trID).closest('.unlockBtn').remove();
			}else{
				alert('Error')
			}
		}).fail(function(jqXHR, textStatus, errorThrown){
	    		alert("Error: "+errorThrown);
		});
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>User Name</th>
      <th>Status</th>
      <th>Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr id="11">
      <td>Jack, Smith</td>
      <td>Active</td>
      <td>12/01/2017</td>
      <td>01:16 PM</td>
      <td class="unlockBtn" style="text-align: center;">
        <input name="unlock" id="unlock" value="Unlock" type="button">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您是否也要删除实际的单元格或只是替换内容？我想你想要做的是首先将你的点击事件放在按钮而不是单元格上（例如$('.unlockBtn .unlock').on('click',unlockRecord);然后当你想用文本替换按钮时，你要删除事件监听器并替换细胞内容

$('#' + trID)
    .find('input[type="button"]')
        .off()
        .parent('.unlockBtn')
        .html('Record is unlocked');

最后（也许这只是因为你发布了一个例子，但为了以防万一，如果这是一个表格，其中显示的html行重复很多，你想要将按钮ID改为＆＃ 39;与表格行一样，每行/每行的唯一性以避免冲突

Answer 2

只需添加回你的ajax电话即可完成。

＆＃13;

$('.unlockBtn').on('click',unlockRecord);

function unlockRecord(){
	var trID = $(this).parents("tr").prop('id');
	
	if(confirm("Are you sure you want to unlock this record?")){
		var cell = $(event.srcElement);
    
   $( cell ).replaceWith( "<div>Record Unlocked</div>" );
	}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>User Name</th>
      <th>Status</th>
      <th>Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr id="11">
      <td>Jack, Smith</td>
      <td>Active</td>
      <td>12/01/2017</td>
      <td>01:16 PM</td>
      <td class="unlockBtn" style="text-align: center;">
        <input name="unlock" id="unlock" value="Unlock" type="button">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

从td单元格中删除jQuery？

2 个答案: