我有一个包含一些数据的表,有些单元格是可编辑的,那些单元格(td标签)包含div,在div中有两个元素:带有初始值的span和一个空的输入标记。如果用户想要编辑单元格,则会隐藏span并且输入框会显示span的文本作为其值。
但是当用户将输入留空时,我无法再显示范围或输入。
这是我到目前为止所拥有的:
//I get all the divs with a specific class name
var editdivs = document.getElementsByClassName("divedit");
//And then attach an even listener
for (var i = 0; i < editdivs.length; i++){
editdivs[i].addEventListener("click", null);
}
//I do the same for td tags
var editspaces = document.getElementsByClassName("tabletoedit");
for (var i = 0; i < editspaces.length; i++){
editspaces[i].addEventListener("click", null);
}
//show input to edit cell
$(".divedit span").on("click", function () {
var $this = $(this);
$this.hide().siblings("input").val($this.text()).show();
});
//And hide input, show span back
$(".divedit input").on("blur", function () {
var $this = $(this);
var value = determineValue( $this.val()); //some logic
$this.hide().siblings("span").text(value).show();
}).hide();
//This code works, console.log function logs the message, but span nor input //shows up if input is left empty:
$(".tabletoedit").on("click", function () {
console.log('inside td');
var $this = $(this);
//$this.hide().siblings("input").val($this.text()).show();
$this.children("span").text("hello").show();
});
我错过了什么? 问题是在这种情况下,拥有空值是有效的。
UPDATE :这里是html部分,原作很大,但这是相关部分。
<tr>
<td rowspan="1" class="tabletoedit"><div id="key0-39" class="divedit"><span style="display: block;"></span><input style="display: none; background-color: rgb(102, 225, 115);"></div></td>
<td rowspan="1"><div id="key1-39"></div></td>
<td rowspan="1"><div id="key2-39"></div></td>
<td rowspan="1">test hgfhgf</td>
<td rowspan="1" colspan="1" style="text-align:right;">0</td>
<td rowspan="1" colspan="1" style="text-align:right;">0</td>
<td rowspan="1" colspan="1" style="text-align:right;">0</td>
<td rowspan="1" colspan="1" style="text-align:right;">0</td>
</tr>
答案 0 :(得分:2)
我已经改变了你的代码,但你需要的逻辑非常相似。所以,不要沉迷于HTML部分,只关注逻辑和理念
普通JavaScript:
var body = document.getElementById('body');
var span = document.getElementById('span');
var input = document.getElementById('input');
body.addEventListener('click', function(e){
if(e.target != span && e.target!= input){
span.textContent = input.value;
span.style.visibility = 'visible';
input.style.visibility = 'hidden';
}
})
span.addEventListener('click', function(e){
e.stopPropagation();
this.style.visibility = 'hidden';
input.value = this.textContent;
input.style.visibility = 'visible';
});
body{
width:300px;
height:250px;
border: 1px solid red;
}
input {
visibility: hidden;
}
span {
position: absolute;
}
<body id='body'>
<span id='span'>Name</span>
<input id='input' type='text' value='Name'/>
</body>
jQuery的:
var body = $('#body');
var span = $('#span');
var input = $('#input');
body.on('click', function(e){
if(e.target != span[0] && e.target!= input[0]){
span.text(input.val());
span.css('visibility', 'visible');
input.css('visibility', 'hidden');
}
});
span.on('click', function(e){
e.stopPropagation();
$(this).css('visibility', 'hidden');
input.val(span.text());
input.css('visibility', 'visible');
});
答案 1 :(得分:0)
您只需使用$ this.val();
获取输入值UPDATE - 使用空单元格跨度,确保它们在CSS中设置了宽度和高度,或者不能成为要单击的元素,然后检查跨度是否有文本。
$(document).mouseup(function (e){
// mouseclick on anywhere but the table
$("input").hide();
$(".divedit span").show();
});
$(".divedit span").each (function(){
$(this).on('click', function(e){
$text = $(this).text();
//check if the span is empty
if (!$text) {
$(this).parent().find("input").val('').show();
} else {
$(this).parent().find("input").val($text).show();
}
// triggered a focus on the input so you don't need a double click
$(this).parent().find("input").trigger( "focus" );
$(this).hide();
});
});
$(".divedit input").each (function(){
$(this).on("change", function () {
var value = $(this).val();
$(this).hide();
$(this).siblings("span").text(value).show();
});
});
&#13;
td {
width: 100px;
border: 1px solid #CCC;
}
.divedit span {
height: 20px;
width: 100px;
}
.divedit input {
height: 20px;
width: 100px;
display:none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td rowspan="1" class="tabletoedit">
<div id="key0-39" class="divedit">
<span style="display: block;"></span>
<input style=" background-color: rgb(102, 225, 115);">
</div>
</td>
<td rowspan="1" class="tabletoedit">
<div id="key0-39" class="divedit">
<span style="display: block;">test</span>
<input style=" background-color: rgb(102, 225, 115);">
</div>
</td>
<td rowspan="1" class="tabletoedit">
<div id="key0-39" class="divedit">
<span style="display: block;">test</span>
<input style=" background-color: rgb(102, 225, 115);">
</div>
</td>
</tr>
</table>
&#13;
希望这有帮助