Question

我有一个表单，我希望能够通过双击来编辑该表单的任何部分。所以从这里开始：

＆＃13;

<table>
	<tr>
		<th>Name</th>
		<th>Email</th>
		<th>Phone</th>
	</tr>
	<tr>
		<td>John Smith</td>
		<td>johnsmith@gmail.com</td>
		<td>+12345678</td>
	</tr>
</table>

＆＃13;

如何通过双击元素，将其转换为输入元素？例如：如果我双击John Smith，则HTML会更改为：

＆＃13;

<table>
	<tr>
		<th>Name</th>
		<th>Email</th>
		<th>Phone</th>
	</tr>
	<tr>
		<form action="index.php" method="post">
			<td><input type="text" value="John Smith" name="name" /></td>
			<td>johnsmith@gmail.com</td>
			<td>+12345678</td>
		</form>
	</tr>
</table>

＆＃13;

＆＃13; 所以现在我可以改变约翰的名字。

有人知道怎么做吗？

Answer 1

怎么样：

<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td id="name">John Smith</td>
        <td>johnsmith@gmail.com</td>
        <td>+12345678</td>
    </tr>
</table>
<script>
$("#name").dblclick(function(e) {
    if (e.target.parentElement.nodeName != 'form') {
        var form = $('<form action="index.php" method="post">');
        var parent = $(e.target.parentElement);
        parent.children().each(function(i, elem){
            form.append(elem);
        })
        parent.empty();
        parent.append(form);
    }
})
</script>

它处理双击事件并将<td>内的所有<tr>元素包装到<form>标记中。

Answer 2

试试这个，第二行的字段可以用dblclick

编辑

＆＃13;

document.querySelectorAll("table tr:nth-child(2) td").forEach(function(node){
	node.ondblclick=function(){
		var val=this.innerHTML;
		var input=document.createElement("input");
		input.value=val;
		input.onblur=function(){
			var val=this.value;
			this.parentNode.innerHTML=val;
		}
		this.innerHTML="";
		this.appendChild(input);
		input.focus();
	}
});

＆＃13;

<table>
	<tr>
		<th>Name</th>
		<th>Email</th>
		<th>Phone</th>
	</tr>
	<tr>
		<td>John Smith</td>
		<td>johnsmith@gmail.com</td>
		<td>+12345678</td>
	</tr>
</table>

＆＃13;

Answer 3

我相信这会做你想要的：

$("document").ready(function () {
    var haveForm = false;

    $("td").dblclick(function () {
        var thisVal = $(this).html();

        if (!haveForm) {
            $("td").wrapAll('<form action="index.php" method="post" />');
            haveForm = true;
        }
        $(this).html('<input type="text" value="' + thisVal + '" name="name" />');
    });
});

jsFiddle

这使用jQuery的wrapAll()和安全防范来创建多个form元素。

双击元素编辑表单

3 个答案: