Question

我可以做些什么来模拟或使用TR的onblur功能。

这是我的jsfiddle http://jsfiddle.net/davomarti/4L859p5t/2/

<table>
  <tr id="view_1" onclick="showEditRow( '1' )"`enter code here`>
    <td>val1_1</td>
    <td>val1_2</td>
    <td>val1_3</td>
  </tr>
  <tr id="edit_1" style="display:none" onblur="showViewRow( '1' )">
    <td><input type="text" value="val1_1"/></td>
    <td><input type="text" value="val1_2"/></td>
    <td><input type="text" value="val1_3"/></td>
  </tr>
  <tr id="view_2" onclick="showEditRow( '2' )">
    <td>val2_1</td>
    <td>val2_2</td>
    <td>val2_3</td>
  </tr>
  <tr id="edit_2" style="display:none" onblur="showViewRow( '2' )">
    <td><input type="text" value="val2_1"/></td>
    <td><input type="text" value="val2_2"/></td>
    <td><input type="text" value="val2_3"/></td>
  </tr>
</table>

function showEditRow( rowId ) {
    var editElemId = "#edit_" + rowId;
    var viewElemId = "#view_" + rowId;

    $(viewElemId).hide();
    $(editElemId).show();
}

function showViewRow(rowElem) {
    var editElemId = "#edit_" + rowId;
    var viewElemId = "#view_" + rowId;

    $(viewElemId).show();
    $(editElemId).hide();
}

我为TR编写了onblur，我知道这对TR不起作用。

我想点击一行并获取编辑框以替换文本，然后当我单击该行时，我希望编辑框被文本TR替换。

Answer 1

我建议您在编辑行中添加更新按钮，并在点击事件中隐藏编辑行：

HTML：

<table class='table'>
  <tr>
    <th>item1</th>
    <th>item2</th>
    <th>item3</th>
    <th></th>
  </tr>
  <tr data-row="1">
    <td>val1_1</td>
    <td>val1_2</td>
    <td>val1_3</td>
    <td></td>
  </tr>
  <tr data-row="2" style="display:none">
    <td><input type="text" value="val1_1"/></td>
    <td><input type="text" value="val1_2"/></td>
    <td><input type="text" value="val1_3"/></td>
    <td><input type="button" value="update"/></td>
  </tr>
  <tr data-row="3">
    <td>val2_1</td>
    <td>val2_2</td>
    <td>val2_3</td>
    <td></td>
  </tr>
  <tr data-row="4" style='display:none;'>
    <td><input type="text" value="val2_1"/></td>
    <td><input type="text" value="val2_2"/></td>
    <td><input type="text" value="val2_3"/></td>
    <td><input type="button" value="update"/></td>
  </tr>
</table>

在javascript中：

$(document).ready(function(){
    $('.table tr').click(function(e){
        e.stopPropagation();
        $this=$(this);
        if($this.data("row")%2==1)
        {
            showEditRow($this.data("row"));
        }
        else
        {
            showViewRow($this.data("row"));            
        }
    });
    $('.table tr input[type="button"]').click(function(){
        var tr=$(this).closest('tr');
        tr.hide();
        tr.prev().show();
    });
    $('.table tr input[type="text"]').click(function(e){
        e.stopPropagation();
    })
});
 function showEditRow(row) {
     var tr = $('.table tr[data-row="'+row+'"]');
     tr.hide();
     tr.next("tr").show();
     tr.next('tr').find('input[type="text"]').first().focus();
 }

 function showViewRow(row) {
     var tr = $('.table tr[data-row="'+row+'"]');
     tr.hide();
     tr.prev("tr").show();
 }

jsFiddleLink

Answer 2

由于您使用的是jQuery，因此请删除onblur标记上的<tr>。然后，编写类似这样的代码......

$("tr").on('click', function() {
  // enable fields and disable text here
  // using something like $(this).find(".text").hide()
});

如评论中所述，您可能不应将此直接连接到<tr>标记，而是连接到它们的类，以便您可以将其限制为仅需要连接的元素。

你也可以这样做......

$("body").on('click', "tr.pseudoClass", function() {
  // enable fields and disable text here
  // using something like $(this).find(".text").hide()
});

...允许动态插入代码而不会破坏。

Answer 3

感谢您的帮助，并指出我正确的方向。我能够通过查看tr内部字段的模糊来解决问题。

http://jsfiddle.net/davomarti/4vzs33cm/

<table>
  <tr id="view_1" class="view">
    <td>val1_1</td>
    <td>val2_1</td>
    <td>val3_1</td>
  </tr>
  <tr id="edit_1" style="display:none" class="edit">
    <td><input class="inputCls" id="edit1_1" type="text" value="val1_1"/></td>
    <td><input class="inputCls" id="edit2_1" type="text" value="val1_2"/></td>
    <td><input class="inputCls" id="edit3_1" type="text" value="val1_3"/></td>
  </tr>
  <tr id="view_2" class="view">
    <td>val1_2</td>
    <td>val2_2</td>
    <td>val3_2</td>
  </tr>
  <tr id="edit_2" style="display:none" class="edit">
    <td><input class="inputCls" id="edit1_2" type="text" value="val1_2"/></td>
    <td><input class="inputCls" id="edit2_2" type="text" value="val2_2"/></td>
    <td><input class="inputCls" id="edit3_2" type="text" value="val3_2"/></td>
  </tr>
</table>

  $(document).ready(
    function()
    {
      var activeElem;

      $( ".view" ).on( "click", function() {
        var elemId = $(this).attr('id');
        var splitId = elemId.split( "_" );
        var id = splitId[1];

        var editElemId = "#edit_" + id;

        $( $(this) ).hide();
        $( editElemId ).show();
        $( editElemId ).find( "#edit2_" + id ).focus();
      });
      $( ".inputCls" ).on( "blur", function() {
        var elemId = $(this).attr('id');
        var splitId = elemId.split( "_" );
        var id = splitId[1];

        var thisTr = $(this).closest('tr');

        if( thisTr.find( "#" + activeElem.attr( "id" ) ).length === 0 ) {
          var viewTrId = "#view_" + id;

          thisTr.hide();
          $( viewTrId ).show();
        }
      });

      $(document).mousedown(function(e) {
        activeElem = $(e.target);
      });
    }
  );

TR的onblur功能

3 个答案: