Question

如何在jQquery中找到使用$("#tab1").on('click', 'td button.save', function() { var $thisParent = $(this).parent().parent().find("td:eq(1)").find("input").val(); $(this).parent().parent().find("td:eq(1)").find("input").hide().end().html('<span>' + $thisParent + '</span>'); }); // Here, this portion is not working: $("#tab1").on('click', 'td span.edit', function() { $(this).parent().parent().find("td:eq(1)").find("input").show(); alert($(this).parent().parent().find("td:eq(1)").find("input").prop("tagName")); });隐藏的输入框？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="tab1" width="80%">
  <tr>
    <td></td>
    <td>
      <input class="fillcolumn" type="text" />
    </td>
    <td>&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;<span class="edit">&#x270E;</span>&#x00A0;&#x00A0;<span class="remove">&#x2718;</span>
    </td>
    <td>
      Weightage: &#x00A0;&#x00A0;&#x00A0;&#x00A0;
      <select>
        <option value="High">High</option>
        <option value="Medium">Medium</option>
        <option value="Low">Low</option>
      </select>
    </td>
    <td>
      <button class="save">Save</button>
    </td>
  </tr>
</table>

input box

上述代码无效，我的意思是，on $('.myClass').css("position","absolute");没有使用其值。有什么帮助吗？

Answer 1

很少有东西需要改变，

附加的edit没有append()类，因此点击不会触发。
使用html()代替html()，<input>删除.parent().parent()代码。
而不是.closest()使用$(this).closest('tr') .find("td:eq(1)") .find("input").hide().end() .append('<span class="edit">' + $thisParent + '</span>');

$("#tab1").on('click', 'td button.save', function() {
  var $thisParent = $(this).closest('tr').find("td:eq(1)").find("input").val();
  $(this).closest('tr').find("td:eq(1)").find("input").hide().end().append('<span class="edit">' + $thisParent + '</span>');
});

// Here, this portion is not working 
$("#tab1").on('click', 'td span.edit', function() {
  $(this).closest('tr').find("td:eq(1)").find("input").show();
  alert($(this).parent().parent().find("td:eq(1)").find("input").prop("tagName"));
});

演示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="tab1" width="80%">
  <tr>
    <td></td>
    <td>
      <input class="fillcolumn" type="text" />
    </td>
    <td>&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;<span class="edit">&#x270E;</span>&#x00A0;&#x00A0;<span class="remove">&#x2718;</span>
    </td>
    <td>Weightage: &#x00A0;&#x00A0;&#x00A0;&#x00A0;
      <select>
        <option value="High">High</option>
        <option value="Medium">Medium</option>
        <option value="Low">Low</option>
      </select>
    </td>
    <td>
      <button class="save">Save</button>
    </td>
  </tr>
</table>

{{1}}

进一步改进选择器的使用。请参阅 Fiddle

Answer 2

而不是html()使用append()

$("#tab1").on('click', 'td button.save', function(){ 
    var $thisParent = $(this).parent().parent().find("td:eq(1)").find("input").val(); 
    $(this).parent().parent().find("td:eq(1)").find("input").hide().end().append('<span>' + $thisParent + '</span>');    
});

Answer 3

当您调用save时，将从页面中删除输入。我想你想要做的是在点击保存时隐藏输入并使用输入中的值添加新的跨度？

这可以帮助你继续前进： http://jsbin.com/pufiroxolo/1/edit?html,js,output

但是像@Shaunack D说的那样可以做很多优化！我刚刚使用了所提供的内容，以免混淆事情！

Answer 4

当您在DOM元素上调用JQuery hide（）时，JQuery会将dom的style属性添加为 display：none 。

您可以使用jquery为所有文本框执行 find（），然后检查每个文本框是否具有样式display：none。像这样的东西

var listOfHidden = []
$($.find("input")).each(function()
{
  if ($(this).css("display") == 'none'){listOfHidden.push(this)}
});
//variable listOfHidden will have the list of all hidden text

在jQuery中使用hide（）查找隐藏的输入框

4 个答案:

演示