前端代码：

<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
			<thead>
				<tr class="text-c">
					<th width="80">id</th>
					<th width="60">时间</th>
					<th width="120">剩余数量（双击修改）</th>
				</tr>
			</thead>
			<tbody class="tbody">
				{volist name='data' id='v'}
					<tr class="text-c">
						<td style="padding-top: 20px;">{$v.id}</td>
						<td style="padding-top: 20px;">{$v.time}</td>
						<td id="{$v.id}" style="padding-top: 20px;">{$v.num}</td>
					</tr>
				{/volist}
			</tbody>
		</table>

这里因为是使用了thinkphp5的模板，将查询的数据使用了volist在前端页面循环输出

最重要的js代码

$(document).ready(function() {
	// 获取每一行第三个td
    var numId=$(".tbody tr td:nth-child(3)").each(function(){
            });
	//当双击td时触发
    numId.dblclick(function(){
        var tdIns=$(this);
        var tdpar=$(this).parents("tr");

        var tdId=$(this).attr("id");
        tdpar.css("backgroundColor","white");

        if(tdIns.children("input").length>0){
            return false;
        }

        var text = $(this).html();
        var inputIns = $("<input  type='number'/>"); //需要插入的输入框代码 
        inputIns.width(tdIns.width);//设置input与td宽度一致 
        inputIns.height("30px");
        inputIns.val(tdIns.html());//将本来单元格td内容copy到插入的文本框input中
        
        tdIns.html(""); //删除原来单元格td内容 

        inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中 

        inputIns.click(function(){
            return false;
        }); 
        //处理Enter和Esc事件   
        inputIns.blur(function(){   
        var inputText = $(this).val();  
        tdIns.html(inputText);  
        tdpar.css("background-color","white");
			$.ajax({
				type:"post",
				url:'edit',
				data:{id:tdId,num:tdIns.html()},//这里data传递过去id和num两个值
				success:function(msg){
				if(msg.state == 1){
						alert(msg.msg);
						history.go(0);
					}
					if(msg.state == 2){
						alert(msg.msg);
						history.go(0);
					}
				}
			});
        }); 
		
    });
});

控制器代码

public function edit($id,$num){
		$data = [
			'num' => $num
		];
		$upd = Db::name('ticket')->where('id',$id)->update($data);
		if($upd){
			$msg['msg'] = '操作成功';
			$msg['state'] = 1;
			return json($msg);
		}else{
			$msg['msg'] = '操作失败';
			$msg['state'] = 2;
			return json($msg);
		}
	}

这就完成了双击td标签来进行修改原来的内容了
修改完成后再使用ajax传给后台进行操作
后台更新完数据后再返回给前端
前端可以根据返回的信息来判定是否修改成功