关于JS有关问题-Java教程-爱易网页

关于JS有关问题

日期：2014-05-20　浏览次数：20659 次

关于JS问题
在动态增加的行里面放置一个button，点击该button后触发js事件让该button所在的行的其他单元格属性为只读，不可编辑状态，然后点击该button旁边的button1后触发js事件让该行的其他单元格属性为可编辑状态，

------解决方案--------------------
你说的单元格里面是什么?单元格本身又不可编辑?
你往里面写了input?
简单点给每行的控件生成对应的名称比如 input_行号_列号,根据行号列号查找控件
智能点的,以当前按钮查找上层DOM,找到TR标签,遍历其中的input标签,设置readonly=true
------解决方案--------------------

JScript code


<html> 
<head> 
<script src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>

$(document).ready(function(){
    var addedTrHtml = 
    '<tr>' +
    '<td><input type="text" /></td>' +
    '<td><select><option value="1">1</option></select></td>' +
    '<td><input type="button" class="enableTr ctrl" value="开启行"/></td>' +
    '<td><input type="button" class="diableTr ctrl" value="关闭行"/></td>' +
    '</tr>';
    
    var tbl = $('#tbl');
    
    $('#addTr').click(function() {
        tbl.append(addedTrHtml);
    });
    
    // 取消disabled以后,根据不同的浏览器,可能会留下被disable时的样式,可以自己写一个样式,在enable的时候替换掉
    $('.enableTr').live('click',function() {
        var tr = $(this).parent('td').parent('tr');alert(tr.html());
        tr.find('input,select').each(function(){
            if(!$(this).hasClass('ctrl'))
                $(this).attr('disabled',false);
        });
    });
    
    $('.diableTr').live('click',function() {
        var tr = $(this).parent('td').parent('tr');
        tr.find('input,select').each(function(){
            if(!$(this).hasClass('ctrl'))
                $(this).attr('disabled',true);
        });
    });
});
</script>
</head> 

<body> 
<input type="button" id="addTr" value="添加行" />

<table id="tbl">

</table>
</body> 
</html>

------解决方案--------------------
探讨
JScript code


<html> 
<head> 
<script src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>

$(document).ready(function(){
    var addedTrH……


------解决方案--------------------
探讨
JScript code


<html> 
<head> 
<script src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>

$(document).ready(function(){
    var addedTrH……

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

关于JS有关问题

相关资料更多>

推荐阅读更多>