Javascript TR的onblur功能

如何模拟或使用TR的onblur功能

这是我的护照

瓦尔1_1
瓦尔1_2
瓦尔1_3
瓦尔2_1
瓦尔2_2
瓦尔2_3
函数showEditRow（rowId）{
var editElemId=“#编辑”+rowId；
var viewElemId=“#视图”+rowId；
$（viewElemId.hide（）；
$（editElemId.show（）；
}
函数showViewRow（rowElem）{
var editElemId=“#编辑”+rowId；
var viewElemId=“#视图”+rowId；
$（viewElemId.show（）；
$（editElemId.hide（）；
}

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

---

我想单击一行并获得编辑框来替换文本，然后当我单击该行外时，我想将编辑框替换为文本TR。

因为您使用的是jQuery，所以请去掉

标记上的

onblur

。然后，编写这样的代码

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

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

如注释中所述，您可能不应该将其直接连接到

标记，而应该连接到附加到标记的类，这样您就可以只连接到需要连接的元素

你也可以这样做

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

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

---

。。。这将允许在不中断的情况下动态插入代码。

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

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>

---

谢谢你的帮助，也谢谢你给我指明了正确的方向。 我能够通过观察tr内字段的模糊来解决问题

瓦尔1_1
瓦尔2_1
瓦尔3_1
瓦尔1_2
瓦尔2_2
val3_2
$（文件）。准备好了吗(
函数（）
{
活性素；
$（“.view”）。在（“单击”，函数（）上{
var elemId=$（this.attr（'id'）；
var splitId=elemId.split（“”）；
var id=splitId[1]；
var editElemId=“#编辑”+id；
$（$（this））.hide（）；
$（editElemId.show（）；
$（editElemId）.find（“#edit2"+id）.focus（）；
});
$（.inputCls”）.on（“模糊”，函数（）{
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=“#视图”+id；
thisTr.hide（）；
$（viewTrId.show（）；
}
});
$（文档）.mousedown（函数（e）{
activeElem=$（e.target）；
});
}
);  

您应该将onblur事件添加到文本输入中。。。使用jquery“on”函数实现这一点。我这样做了，但只要我点击一个字段进行编辑，tr的onblur就会被触发。关于如何允许编辑字段有什么建议吗？同样为了让onblur能够处理行，我必须将tabindex=“-1”添加到行中，并将焦点设置在可见行上。这是一个很好的建议。我做了修复，效果很好。但是，我必须为要操作的行分配一个伪类名，并按类名选择行，而不是tr。谢谢rejnev。它可以工作，我也有类似的功能，不过我更喜欢你的。问题是，当我在输入框中单击时，编辑行被视图行替换。我希望能够编辑字段，然后在行外单击。只是为了了解情况，最好以$sign开头jQuery变量的名称。比如：var$thisTr=$（'selector'）

<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);
      });
    }
  );