发送表中已更改行的ID（将HTML发送到JS）

Question

I have 7 row and i need to use my function only for row which was edited. How can i send id? or maybe there are more easy way? I tried to send number of row id onChange="setprice(this.value,18,5)" last one is ID of row, but on split int+ string I can not detetct it as ID . For example: var idofrow = ('setvalue'+row); $("#idofrow").html(""); var idofrow = ('setvalue'+row); $("#idofrow").html(""); . #idofrow does not work

 function setprice(val, ay, row) { var rowid_ilk = event.target.getAttribute('id'); $("#rowid_ilk").html(""); var total = Math.round((((({{ price_without_symbol } } - val) / ay) * ({{ kredittable.kredit_faiz / 100 }})) + (({{ price_without_symbol }} - val) / ay))); var rowset = 'setvalue' + row; alert(rowset); rowset.innerHTML += total; } 

 <table class="table table-striped" id="tablebrd"> <thead> <tr> <th scope="col">{{ text_kredit_mesac }}</th> <th scope="col" style="width: 28%">{{ text_min_vznos }}</th> <th scope="col">{{ text_mes_plata }}</th> </tr> </thead> <tbody> <tr> <td>3 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden1" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,3,1)" /></td> <td> <div id="setvalue1"></div> </td> </tr> <tr> <td>6 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden2" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,6,2)" /></td> <td> <div id="setvalue2"></div> </td> </tr> <tr> <td>9 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden3" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,9,3)" /></td> <td> <div id="setvalue3"></div> </td> </tr> <tr> <td>12 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden4" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,12,4)" /></td> <td> <div id="setvalue4"></div> </td> </tr> <tr> <td>18 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden5" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,18,5)" /></td> <td> <div id="setvalue5"></div> </td> </tr> <tr> <td>24 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden6" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,24,6)" /></td> <td> <div id="setvalue6"></div> </td> </tr> <tr> <td>36 {{ text_kredit_mesaca }}</td> <td><input type="number" name="ilkoden" id="ilkoden7" value="{{ kredittable.kredit_min_ilkin }}" onChange="setprice(this.value,36,7)" /></td> <td> <div id="setvalue7"></div> </td> </tr> </tbody> </table> 

Answer 1

You can access the id of your changed element by accessing the target property of the event: event.target :

event.target is a reference to the object that dispatched the event

Then access its id name with .getAttribute . And remove the first seven letters of the id name to get the element's number with the method .substr .

event.target.getAttribute('id').substr(7)

---

Here's a quick demo:

 const fn = function() { console.log(event.target.getAttribute('id').substr(7)) } 

 <div id="ilkoden11" onclick="fn()">This is item 11</div> 

---

If you want to select the id of an element on the same level, you will need to do some navigating inside the HTML tree, the following selector will do that:

const div = event.target.closest('tr').querySelector('div').id;
                              ↑                  ↑
                        parent <tr>      find <div> child

Here is an example:

 const setprice = function() { const target = event.target.id; const value = event.target.value; const div = event.target.closest('tr').querySelector('div').id; console.log(target, value, div) } 

 <table> <tr> <td><input id="ilkoden2" onkeyup="setprice()" /></td> <td> <div id="setvalue2"></div> </td> </tr> </table>