Question

我有一个包含一些数据的表，有些单元格是可编辑的，那些单元格（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>

Answer 1

我已经改变了你的代码，但你需要的逻辑非常相似。所以，不要沉迷于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');
});

Answer 2

您只需使用$ this.val（）;

获取输入值

UPDATE - 使用空单元格跨度，确保它们在CSS中设置了宽度和高度，或者不能成为要单击的元素，然后检查跨度是否有文本。

＆＃13;

   $(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;

希望这有帮助

单击事件触发后不显示跨度

2 个答案: