CODEWITHSUNDEEP
jqueryhtmlhtml-tableeach
blueberry
blueberry

Reputation: 51

Making cells of a table readonly with JQuery

The user can edit this row and if all the cells from this row are filled with data, the row becomes read-only (like the rest of the rows in the table). After all that and after deleting a row the other ones have to move up and not down like it's normal. I've tried to do something like this :

$(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);
                });
            }
        });
    });
});
<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>

Upvotes: 1

Views: 9567

Answers (1)

user3154370
user3154370

Reputation: 

$('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);
         });
    }
});

And for hiding one row aftet click on delete: 

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

Upvotes: 2

Related Questions