Question

用户可以编辑此行，如果此行中的所有单元格都填充了数据，则该行将变为只读（与表中的其余行一样）。在所有这一切之后以及在删除一行之后，其他的必须向上移动而不是向下移动，就像它正常一样。我试过这样的事情：

＆＃13;

$(document).ready(function()
  {
    $(document).on("click", "input", function(){
        $("tr").each(function(){
            var readOnly = true;
            $(".cell td").each(function(){
                if($("input").val()){
                    rd = false;
                }
            });
            if(readOny){
                $(".cell td").each(function(){
                    $("input").prop("readonly",true);
                });
            }
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <table>
        <tr class="prototype">
            <td class="special"><button type="button" class="delete">Delete</button></td>
            <div class="cell">
                <td><input type="text" value></td>
                <td><input type="text" value></td>
                <td><input type="text" value></td>
                <td><input type="text" value></td>
                <td><input type="text" value></td>
            </div>
            <td class="special"><button type="button" class="add">Add</button></td>
        </tr>
        <tr class="row">
            <td class="special"><button type="button" class="delete">Delete</button></td>
            <div class="cell">
                <td><input type="text" value="aaa"></td>
                <td><input type="text" value="aaa"></td>
                <td><input type="text" value="aaa"></td>
                <td><input type="text" value="aaa"></td>
                <td><input type="text" value="aaa"></td>
            </div>
            <td class="special"><button type="button" class="add">Add</button></td>
        </tr>
        <tr class="row">
            <td class="special"><button type="button" class="delete">Delete</button></td>
            <div class="cell">
                <td><input type="text" value="bbb"></td>
                <td><input type="text" value="bbb"></td>
                <td><input type="text" value="bbb"></td>
                <td><input type="text" value="bbb"></td>
                <td><input type="text" value="bbb"></td>
            </div>
            <td class="special"><button type="button" class="add">Add</button></td>
        </tr>
        <tr class="row">
            <td class="special"><button type="button" class="delete">Delete</button></td>
            <div class="cell">
                <td><input type="text" value="ccc"></td>
                <td><input type="text" value="ccc"></td>
                <td><input type="text" value="ccc"></td>
                <td><input type="text" value="ccc"></td>
                <td><input type="text" value="ccc"></td>
            </div>        
            <td class="special"><button type="button" class="add">Add</button></td>
        </tr>
        <tr class="row">
            <td class="special"><button type="button" class="delete">Delete</button></td>
            <div class="cell">
                <td><input type="text" value="ddd"></td>
                <td><input type="text" value="ddd"></td>
                <td><input type="text" value="ddd"></td>
                <td><input type="text" value="ddd"></td>
                <td><input type="text" value="ddd"></td>
            </div>
            <td class="special"><button type="button" class="add">Add</button></td>
        </tr>
        <tr class="row">
            <td class="special"><button type="button" class="delete">Delete</button></td>
            <div class="cell">
                <td><input type="text" value="eee"></td>
                <td><input type="text" value="eee"></td>
                <td><input type="text" value="eee"></td>
                <td><input type="text" value="eee"></td>
                <td><input type="text" value="eee"></td>
            </div>
            <td class="special"><button type="button" class="add">Add</button></td>
        </tr>
    </table>

＆＃13;

Answer 1

$('input[type=text]').blur(function(){
    parentTr = $(this).parent().parent();
    var canBeReadOnly = true;
    $(parentTr).find('input').each(function(){
        if($(this).val().length == 0)
        {
             canBeReadOnly = false;
        } 
    }) ;

    if(canBeReadOnly)
    {
         $(parentTr).find('input').each(function(){
             $(this).prop('disabled', true);
         });
    }
});

点击删除后隐藏一行：

 $('.delete').click(function(){
     $(this).parent().parent().slideUp('slow');
 });

使用JQuery只读表格的单元格

1 个答案: