Пример использования attr () - PullRequest
Новая
       5

Пример использования attr ()

0 голосов
/ 08 марта 2012

После этого вопроса - Расширение функциональности строк таблицы клонов - изменение идентификатора строки

код - http://jsfiddle.net/EwQUW/58/

Я хочу обновить attr. Пожалуйста, проверьте код, и я добавил комментарии, чтобы понять, о чем я говорю.

EDIT 

<table id="table">
    <tbody>
        <tr>
            <td>
                <select name="make[]" id="make" onchange="change(this,'model')">
                    <option value="" selected=“selected”> Please Select </option>
                    <option value=Ford> Ford</option>
                    <option value=Nissan> Nissan</option>
                    <option value=Volvo> Volvo</option>
                    <option value=BMW> BMW</option>
                </select>
            </td>
            <td>
                    <select name="model[]" id="model" onchange="change(this,'make')">
                    <option value="" selected=“selected”> Please Select </option>
                    <option value=Ford> Fiesta</option>
                    <option value=Nissan> Mirca</option>
                    <option value=Volvo> s60</option>
                    <option value=BMW> M3</option>
                </select>
            </td>
            <td>
                <input id="country" name="country[]"/>
            </td>
            <td>
                <input id="city" name="city[]" />
            </td>
        </tr>
    </tbody>
</table>

<button id="add">Add</button>

Javascript 

function change(fld,id) {
    var opt = fld.selectedIndex;
    if (fld[opt].value != ' ') {
        var sel = document.getElementById(id);
        for (var i = sel.options.length -1; i > -1; i--) {
            if (fld[opt].value == sel[i].value) sel[i].selected = true;
        }
    }
}

Когда я добавляю новую строку, я хочу, чтобы ID, NAME и onchange были обновлены с указанием количества или длины, как вы указали.

Поскольку ID обновляется и заменяется на id = make на id = make2, так что onchange все еще работает

ИЗМЕНИТЬ СНОВА

На самом деле имена будут массивом. Так что только IDS и Onchange требуют обновления в зависимости от количества строк

1 Ответ

0 голосов
/ 08 марта 2012

Первое, что я придумал, это: 

function change(fld, id) {
    var opt = fld.selectedIndex;
    if (fld[opt].value != ' ') {
        var sel = document.getElementById(id);
        for (var i = sel.options.length - 1; i > -1; i--) {
            if (fld[opt].value == sel[i].value) sel[i].selected = true;
        }
    }
}

$('select').change( // moving away from intrusive in-line JavaScript
    function() {
        var changeTarget; // used to determine which select to change
        if (this.id == 'make') {
            changeTarget = 'model';
        }
        else {
            changeTarget = 'make';
        }
        change(this,changeTarget);
    });

$('#add').click(

function() {
    $('#table tbody tr:last').clone(true).appendTo($('#table')).find('input,select').each(

    function() {
        var attr = this.id.replace(/\d/, ''); // gets the text of the id attribute
        var length = $('#table tbody tr').length; // finds what number the new attributes should be
        if ($(this).is('input')){ // select elements don't need their name to be changed
            $(this).attr({
                'id': attr + length,
                'name': attr + length
            });
        }
        else if ($(this).is('select')){
            $(this).attr('id',attr + length);
        }

    });
});​

Демонстрация JS Fiddle .

Отредактировано для удаления жестко закодированного выбора 'make' / 'model' в обработчике событий select change() для следующего: 

$('select').change(
    function() {
        var changeTarget = $(this)
            .closest('tr')
            .find($('select'))
            .not($(this))
            .attr('id');
        change(this,changeTarget);
    });

JS Fiddle demo .

...