Question

我有一个带行的html表每行都有一个带有按钮的操作列，当按下此按钮时，我想在第二个td中显示一个用户必须填写并提交的输入字段，然后首先完成事件/点击，否则输入应该再次消失。

<table>
     <thead>
          <tr>
              <th>ID</th>
              <th>user-Input</th>
              <th>data3</th>
              <th>data4</th>
              <th>data5</th>
              <th>Action</th>
          </tr>
    </thead>
    <tbody id="customers">
          <tr>
              <td>1</td><td></td><td>data</td><td>data</td><td>data</td><td><button type='button' class='acceptCustomerBut'>GO</button></td>
          </tr>
    </tbody>
</table>

的javascript / jquery的

$(document).on("click", ".acceptCustomerBut", function(e) {
    e.preventDefault();
    $(this).parent().parent().find("td:nth-child(2)").html("<input type='number' name='customer_id'>");
    // DO SOMETHING
});

DO SOMETHING - 我正在考虑是否有可能使函数检测输入是否已经使用jquery的.on（“更改”）接收到值，否则隐藏输入字段？

Answer 1

试试这个，

$(document).on("click", ".acceptCustomerBut", function(e) {
    e.preventDefault();
    var $td=$(this).closest('tr').find("td:eq(1)");
    if($td.find('input').length){ // check input length, if exists then hide it
        $td.find('input').hide();
    } else { // else add it
        $td.html("<input type='number' name='customer_id'>");
    }
});

Live Demo

如何检测jquery事件内的变化？

1 个答案: