无法使用javascript从html表中检索除第一行以外的其他行的值

Question

I am trying to get the value of a hidden input inside a tag in html table element through javascript in a MVC view. i have get the respective value of the hidden input which is in a loop,when the the respective row is clicked. I have tried many codes but it returns the value of the first row alone for all the rows in the table. i tried the following:

@foreach (var item in Model)

{

<tr>
    <td hidden><input value="@item.QuoteId" id="QuoteID" class="QuoteID"> </td>
</tr>
}

javascript:

$("tr").click(function () {

var quoteid=document.getElementById("#QuoteID").innerHTML alert(quoteid) ; alert($('.QuoteID').val()); }

if my db contains 3 values for quote,say 12,17,18.. it alerts 12 for all the row clicks.. Pls help,I am literally stuck. I have been trying it from 3 days,i cant figure it out. I guess it is some simple mistake from my side. Pls help. I am not able to finish the work assigned to me because of this simple error.

Answer 1

You're using the same id multiple times. The ID has to be unique !! To make this to work you could call the unique id, or put a onclick on the specific row and call your function with this . In your function you can use this.value .

<script>
    function ShowMeThePower(myElement) {
        alert(myElement.innerHTML);
    }
</script>
<div onclick="ShowMeThePower(this);">This is great!</div>

http://jsfiddle.net/3RJVd/

Edit:

To satisfy the OP:

<table>
    <tr>
        <td><input type="text" id="show1" value="test1" /></td>
    </tr>
    <tr>
        <td><input type="text" id="show2" value="test2" /></td>
    </tr>
</table>
<script>
    for (var i = 1; i < 3; i++){
        alert(document.getElementById('show' + i).value);
    }
</script>

If you see, it's the same logic. Just be sure to use unique id's.

http://jsfiddle.net/4gMy6/