Вопрос, скорей, теоретический, но все же интересно. Вот допустим, есть задача, раскидать нужный функционал (расчет процента) по полям таблицы. Есть вот реализация:
<html>
<head>
</head>
<body>
<table>
<tr> <td> type number: </td> <td> type percent: </td> <td> result </td> </tr>
<tr> <td> <input /> </td> <td> <input /></td> <td> <input /> </td> </tr>
<tr> <td> <input /> </td> <td> <input /></td> <td> <input /> </td> </tr>
<tr> <td> <input /> </td> <td> <input /></td> <td> <input /> </td> </tr>
</table>
<script>
table=document.querySelector("table")
trs=(table.querySelectorAll("tr"))
add=function(inputs){
var number=inputs[0]
var percent=inputs[1]
var result=inputs[2]
var getPercent=function(){
if((number.value==="")||(percent.value==="")) return result.value="waiting..."
result.value=percent.value*(number.value/100)
}
number.oninput=percent.oninput=getPercent
}
for(var i=1; i<trs.length; i++) {
add(trs[i].querySelectorAll("input"))
}
</script>
</body>
</html>
но она мне не очень нравится.
То есть, мы тут вешаем getPercent на нужные input, в каждой строке таблицы. Но у нас тут функция своя, на каждые 2 инпута из каждой строки таблицы. Как-то можно было бы сделать, наверное, чтобы функция была одна, и она цепляла контекст каждого инпута из каждой строки. Можно это сделать?
