Question

我想要节目表单编辑时遇到问题

<!-- this is form-->
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>
<% while(resultset.next()){ %>
    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td><%= no %></td>
                <td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>	
                <td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>	
                <td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>	
                <td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>	
                <td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>	
                <td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
                <td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
                <td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
            </tr>
        </form>
    </tbody>
<% no++; } %> 
</table>

当glypicon编辑单击时，表单将启用。这里是 JAVASCRIPT：

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('#elementId').click(function(){
        $('#f1').removeAttr("disabled");
        $('#f2').removeAttr("disabled");
        $('#f3').removeAttr("disabled");
        $('#f4').removeAttr("disabled");
        $('#f5').removeAttr("disabled");
        $('#f6').removeAttr("disabled");
        $('#f7').removeAttr("disabled"); 
    });
</script>

点击<a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;">时第一排，工作。

但对于像这样的第二行

Answer 1

您在一个页面上重复相同的ID。您必须在页面上只使用一个ID。您可以多次使用同一个类，但不能使用id。

Answer 2

要做的一个小例子：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>

    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td>1</td>
                <td><input type="text" class="aaa"/></td>
                <td><input type="text" class="aaa"/></td>
                <td class="abc">AAA</td>
            </tr>
        </form>
    </tbody>

</table>

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('.abc').click(function(){
		
        $(this).closest('tr').find('.aaa').removeClass('aaa');
    });
</script>

＆＃13;

Answer 3

通过这种方式，您只需要指向最接近的点击元素。您可以根据此修改任何内容。如果您遇到任何问题，请随时询问任何疑问。我刚刚分享了一个执行示例。这适用于表中的任意行数。

Answer 4

基本上，当您单击AAA时，它将从输入字段中删除类“aaa”。您可以使用Firebug进行检查。它没有显示或弹出任何内容。但我写了一个新代码。它将启用和禁用输入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>

    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td>1</td>
                <td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
                <td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
                <td class="abc">AAA</td>
            </tr>
        </form>
    </tbody>

</table>

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('.abc').click(function(){
		$(this).closest('tr').find('.aaa').attr('disabled',false);
        
        
    });
</script>

盒。

Answer 5

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>

    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td>1</td>
                <td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
                <td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
                <td class="abc">AAA</td>
            </tr>
        </form>
    </tbody>

</table>

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('.abc').click(function(){
		$(this).closest('tr').find('.aaa').attr('disabled',false);
        
        $(this).closest('tr td:eq(2)').find('a:eq(0)').show();
      $(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
      // Or YOu can use
      $(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
      $(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
    });
</script>

＆＃13;

请参考eq :( TR的COlUMN）。它从零开始，因此进行相应的调整。希望您能得到完整的答案。

Answer 6

在tr中添加一些类。

<script type="text/javascript"> 
    $('.abc').click(function(){
        $('trClassName').find('.aaa').attr('disabled',true);
		$(this).closest('tr').find('.aaa').attr('disabled',false);
        
        
    });
</script>

希望它能解决你所有的问题。

Answer 7

只在tbody tr中添加类，并且它应该在jquery语法中使用dot。我已经提到了classname，它也应该是.TrClassName，你将在tr中提到。

onClick启用表单

7 个答案: