Jeditable plugin - All fields in a table row editable at same time

http://stackoverflow.com/questions/4375705/jeditable-plugin-all-columns-editable-at-same-time/4392708#4392708

by Sk8erPeter

HTML

<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.charcounter.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.autogrow.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/js/jquery.autogrow.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/js/jquery.charcounter.js"></script>
<h1><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a> plugin - All fields in a table row editable at same time</h1>

<p>Question: <a href="http://stackoverflow.com/questions/4375705/jeditable-plugin-all-columns-editable-at-same-time/4392708#4392708">http://stackoverflow.com/questions/4375705/jeditable-plugin-all-columns-editable-at-same-time/4392708#4392708</a></p>

<table border="1">
    <thead>
        <tr>
            <th>1st</th>
            <th>2nd</th>
            <th>3rd</th>
            <th>4th</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="edit charcounter">blah blah 1</div>
            </td>
            <td>
                <div class="edit charcounter">blah blah 2</div>
            </td>
            <td>
                <div class="edit charcounter">blah blah 3</div>
            </td>
            <td>
                <button type="button" class="edit_all_btns" id="btn1">Click this button and all the fields in this row will become editable!</button>
            </td>
        </tr>
        <tr>
            <td>
                <div class="edit charcounter">blah blah 1</div>
            </td>
            <td>
                <div class="edit charcounter">blah blah 2</div>
            </td>
            <td>
                <div class="edit charcounter">blah blah 3</div>
            </td>
            <td>
                <button type="button" class="edit_all_btns" id="btn2">Click this button and all the fields will...

JavaScript

$(document).ready(function () {
    $(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
        indicator: "<img src='http://www.appelsiini.net/projects/jeditable/img/indicator.gif'>",
        type: "charcounter",
        submit: 'OK',
        tooltip: "Click to edit...",
        onblur: "ignore",
        charcounter: {
            characters: 60
        },
        event:'dblclick'
    });

    $('.edit_all_btns').click(function () {
        $(this).parent().siblings("td").find('.edit').dblclick();
    });

});