mardi 27 octobre 2015

jQuery - change input value to checkbox and checked

I wrote a schedule function, you can type your name and check days, it will dynamically add to the rule table. And I also added an button to change your input values and save. But now, I can only edit "Name" values, is it possible to change days to checkbox, if I click edit button? Click edit button and days change to the checkbox(Sun Mon Tue Wed Thu Fri Sat) and checked if I've already chosen it, It's better to click another days and save.

jsfiddle http://ift.tt/1N6DYoY

html part:

<div>
    <label>Type Your Name</label>
    <div>
        <input id="name" type="text" maxlength="20">
    </div>
</div>
<div>
    <label></label>
    <div>
        <table id="Date">
            <tbody>
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
                <tr>
                    <td><input name="Sunday" type="checkbox" value="0"></td>
                    <td><input name="Monday" type="checkbox" value="1"></td>
                    <td><input name="Tuesday" type="checkbox" value="2"></td>
                    <td><input name="Wednesday" type="checkbox" value="3"></td>
                    <td><input name="Thursday" type="checkbox" value="4"></td>
                    <td><input name="Friday" type="checkbox" value="5"></td>
                    <td><input name="Saturday" type="checkbox" value="6"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div>
    <button type="button" id="add">Add</button>
</div>
<br>
<div>
<table id="form">
    <tbody>
        <tr>
            <th>Rules</th>
        </tr>
    </tbody>
</table>

jQuery part:

var rowNum = 0;
var dateVals = [];

$('#add').click(function() {
    var Name = $('#name').val();
    var dateVals = [];
    $('#Date :checked').each(function () {
        dateVals.push($(this).attr('name'));
    });
    rowNum ++;

    var row = '<tr id="row' + rowNum + '">'
            + '<td class="rowName">' + Name + '</td>&nbsp;&nbsp;&nbsp;&nbsp;'
            + '<td class="rowDate">' + dateVals + '</td>'
            + '<td><div><button type="button" class="edit">Edit</button></div></td>'
            + '</tr>';

    $(row).insertAfter($("#form > tbody > tr:last"));
    $('#name').val('');
    $('#Date :checked').removeAttr('checked');
});

$('#form').on('click','.edit',function() {
    var $row = $(this).closest('tr');
    $('.rowName',$row).each(function() {
        if ($(this).find('input').length) {
            $(this).text($(this).find('input').val());
        }
        else {
            var t = $(this).text();
            $(this).html($('<input maxlength="20" />',{'value' : t}).val(t));
        }
    });

    $(this).text(function(_, val){
        return val == 'Save' ? 'Edit' : 'Save';
    });
});




Aucun commentaire:

Enregistrer un commentaire