Question

我是网络开发的新手...正在使用jsp创建一个html表。（春天内有兴趣者）

<tbody>
<c:forEach var="row" items="${data.rows}">
   <tr>
      <td>  <c:out value="${row.DATA1}" />  </td>
      <td>  <c:out value="${row.DATA2}" />  </td>
      <td class="formClass" title="click to edit...">  
          <form> 
            <input type="text" name="DATA" value="${row.DATA}"> 
            <input type="submit" value="Submit">
          </form> 
      </td>
      <td>  <c:out value="${row.DATA3}" />  </td>

       </tr>
   </c:forEach>
</tbody>

问题是，在用户点击textarea之前，我想让提交按钮不可见。我不知道会有多少行，因为它来自数据库，所以我不能只为每个提交按钮分配一个ID。

我该怎么做？如果可能的话，我想在创建单独的css或js链接到

之前将解决方案放到.jsp文件中

Answer 1

只需使用jQuery即可。

首先，您必须在表单<form class="CLASSNAME">上定义类或ID。

然后试试这个：

$('.CLASSNAME').each(function(){
    var form_elements=$(this.elements); //gets all elements that belong to this form
    var form = $(this);
    form_elements.each(function(){
        var element = $(this); 
        if(element.attr('type')!="submit"){ //exclude the button type
            element.on('focus', function(){ //add focus handler that will trigger when you click on an element
                form.find('input[type="submit"]').fadeIn(); //shows the button
            });
        }
    });
});

不要忘记在CSS上将提交按钮设置为display:none;，fadeIn()功能会将其设置回display:block;

注意：这适用于每个有.CLASSNAME类的表单！

Answer 2

您根本不需要更改HTML，使用jQuery非常简单。首先，隐藏页面上的所有submit元素。然后，当您的输入被聚焦时，找到下一个submit兄弟并显示它。

这是一个简单的可运行示例：

$(function() {
  $('input[type="submit"]').hide();
});

$('input[type="text"]').on('focus', function() {
  $(this).next('input[type="submit"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
   <tr>
      <td>DATA1</td>
      <td>DATA2</td>
      <td class="formClass" title="click to edit...">  
          <form> 
            <input type="text" name="DATA" value="row.DATA"> 
            <input type="submit" value="Submit">
          </form> 
      </td>
      <td>DATA3</td>
   </tr>
   <tr>
      <td>DATA1</td>
      <td>DATA2</td>
      <td class="formClass" title="click to edit...">  
          <form> 
            <input type="text" name="DATA" value="row.DATA"> 
            <input type="submit" value="Submit">
          </form> 
      </td>
      <td>DATA3</td>
   </tr>
</table>

Answer 3

您需要做的是将focus事件绑定到所有文本输入元素。在事件函数this内部将引用触发事件的输入。由于输入是兄弟，您可以使用siblings选择器显示该特定文本输入的兄弟提交按钮。

所以这里是代码：

// before using jQuery, you have to wait for the dom to be ready
$(document).ready(function () {

    // bind an focus event to all the text inputs
    $('input[type="text"]').on('focus', function () {

        // inside this function, $(this) is referring to the input that triggered the event
        $(this).siblings('input[type="submit"]').fadeIn();

    });

});

如果您愿意，也可以使用.show()代替.fadeIn()。

请记住先用css隐藏提交按钮：

input[type="submit"] {
    display: none;
}

或jQuery：

$('input[type="submit"]').hide();

这是一个演示：http://jsfiddle.net/zmr5ytrk/1/

使用jsp切换动态创建的html按钮的可见性

3 个答案: