使用JavaScript编辑Bootstrap Modal文本输入

Question

我有一个使用Bootstrap编辑模态文本输入的脚本，我想只编辑一个字段输入，即电子邮件部分。点击编辑图标后，它会编辑＆＃34;用户角色＆＃34;它也会折叠成文字。

以下是图片：

代码：

＆＃13;

＆＃13;

<script type="text/javascript">
		$(document).ready(function(){
			$('[data-toggle="tooltip"]').tooltip();
			var actions = $("table td:last-child").html();
			// Append table with add row form on add new button click
		    $(".add-new").click(function(){
				$(this).attr("disabled", "disabled");
				var index = $("table tbody tr:last-child").index();
		        var row = '<tr>' +
		            '<td><input type="text" class="form-control" name="name" id="name"></td>' +
		            '<td><select class="form-control" id="UEA_role-input"><option value="Admin">Admin</option><option value="Manager">Manager</option><option value="Author">Author</option><option value="Viewer">Viewer</option></select></td>' +
					'<td>' + actions + '</td>' +
		        '</tr>';
		    	$("table").append(row);		
				$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
		        $('[data-toggle="tooltip"]').tooltip();
		    });
			// Edit row on edit button click
			$(document).on("click", ".edit", function(){		
		        $(this).parents("tr").find("td:not(:last-child)").each(function(){
					$(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
				});		
				$(this).parents("tr").find(".add, .edit").toggle();
				$(".add-new").attr("disabled", "disabled");
		    });
		});
</script>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">Users &amp; Email Addresses</h5>
	      </div>
	      <div class="modal-body">
		            <div class="table-title">
		                <div class="row">
		                    <div class="col-sm-8"><h2>Employee <b>Details</b></h2></div>
		                    <div class="col-sm-4">
		                        <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>&nbsp;Add New</button>
		                    </div>
		                </div>
		            </div>
		            <table class="table table-bordered">
		                <thead>
		                    <tr>
		                        <th>Email</th>
		                        <th>User Role</th>
		                        <th>Actions</th>
		                    </tr>
		                </thead>
		                <tbody>
		                    <tr>
		                        <td id="email-input"><input type="text" class="form-control" name="name" id="name"></td>
		                        <td><select class="form-control" id="UEA_role-input"><option value="Admin">Admin</option><option value="Manager">Manager</option><option value="Author">Author</option><option value="Viewer">Viewer</option></select></td>
		                        <td>
									<a class="add" title="Add" data-toggle="tooltip"><span class="glyphicon glyphicon-plus"></span></a><a class="edit" title="Edit" data-toggle="tooltip"><span class="glyphicon glyphicon-pencil"></span></a><a class="delete" title="Delete" data-toggle="tooltip"><span class="glyphicon glyphicon-remove"></span></a></td>
		                    </tr>
		                </tbody>
		            </table>
		        </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>

＆＃13;

＆＃13;

＆＃13;

以下是JSFiddle文件：https://jsfiddle.net/vchzte9b/4/

只需关注编辑按钮上的＆＃34; //编辑行点击＆＃34;参与JavaScript文件，我相信我可以在其中定义该部分。