Сетка с несколькими полями ввода для строки

Question

У меня есть «сетка» с несколькими полями ввода для каждой строки. Допустим, каждое поле ввода представляет собой день недели.

HTML:

<table id="grid"> 
    <tr> 
     <td><input class="fri" type="text" value="foo" /></td> 
     <td><input class="mon" type="text" value="bar" /></td> 
     <td><input class="tue" type="text" value="baz" /></td> 
     <td><input class="wed" type="text" value="x" /></td> 
     <td><input class="thu" type="text" value="y" /></td> 
    </tr> 
    ... 

JQuery:

$('#grid').on('change', '.fri', function() { 
    var value = $(this).val(); 
    //do something 
}); 

$('#grid').on('change', '.mon', function() { 
    var value = $(this).val(); 
    //do something 
}); 

// And so on... 

Там может быть любое количество строк, все они имеют те же поля.

Я сделал рабочий fiddle того, что я пытаюсь сделать.

Однако, я чувствую, что повторяю себя слишком много (с jQuery), и мне было интересно, есть ли способ сделать это более кратко (желательно с использованием jQuery).

Answer 1

Вы можете использовать вместо выбора элемента вместо использования индивидуальных идентификаторов, а затем их связывания:

$('#grid').on('change', 'input:text', function() { 
    var value = $(this).val(); 
    //do something 
}); 

Кроме того, если у вас есть другие текстовые поля в одной таблице, которые вы не хотите, чтобы предназначаться затем использовать селектор несколько классов:

$('#grid').on('change', '.fri,.mon,.tue', function() { 
    var value = $(this).val(); 
    //do something 
}); 

Answer 2

Вы можете использовать event.target так:

$('#grid').on('change', function (e) { 
    alert(e.target.value); 
}); 

Это будет единственный jQuery, в котором вы нуждаетесь.