[RESOLVED]How to access an element inside the <td> element of the table which is being looped?

I have a nested looped tables below and I want to access an element inside the td element which is a div element named ‘divrep’ which is currently closed. I want to access
this div element when the input button named 
‘Reply’ is click so that I can open it. I have a javascript code below to open it but it will always open the first row. How do I open it in an exact index of the row of the
table based on the index where the clicked input button is located. So far, this what I have:

function OpenReply() {
    var div = document.getElementById("divrep");
    div.style.display = "block";
}
<table id="mytable">     

    @foreach (var item in Model.Comments )
    {
        <tr >
            <td class="tdstyle" >
                <div >  @Html.DisplayFor(modelItem => item.name) </div> 
                <p>  @Html.DisplayFor(modelItem => item.comment) </p>
                <p> <input type="button" id="Reply" name="Reply" value="Replie(s)" onclick ="return OpenReply()" /> </p>

                <div id="divrep" style="display:none>
                    <table>
                    @foreach (var item2 in Model.Replies.Where(r => r.idrep == item.Id))
                    {
                        <tr >
                            <td >
                                <div> @Html.DisplayFor(modelItem => item2.namerep) </div> 
                                <p >@Html.DisplayFor(modelItem=>item2.reply)  </p>
                            </td>
                        </tr>
                    } 
                    </table>           

                    @using (Html.BeginForm("PostComment", "Profile", FormMethod.Post, new { }))
                    {
                        <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">
                            <input type="text" id="comidvalue" name="idrep" value="@Html.DisplayFor(modelItem=>item.Id)" />
                            <span class="field-validation-valid" data-valmsg-for="idrep" data-valmsg-replace="true"></span>
                        </div>
                        <br />
                        <input type="text" id="namerep" name="namerep" />
                        <span class="field-validation-valid" data-valmsg-for="namerep" data-valmsg-replace="true"></span>
                        <br />
                        <textarea id="reply" name="reply" style="width:445px;height:100px;resize:none" ></textarea>
                        <span class="field-validation-valid" data-valmsg-for="reply" data-valmsg-replace="true"></span>
                        <input type="submit" value="Post Reply" name="butname" />
                    }
                    <br />
                </div>
            </td>       
        </tr>
    }

</table>

function OpenReply(i) {
    var div = document.getElementById("divrep" + i);
    div.style.display = "block";
}

<table id="mytable">     

@{
    int i = 0;
    foreach (var item in Model.Comments )
    {
        i++;
        <tr >
            <td class="tdstyle" >
                <div >  @Html.DisplayFor(modelItem => item.name) </div> 
                <p>  @Html.DisplayFor(modelItem => item.comment) </p>
                <p> <input type="button" id="Reply" name="Reply" value="Replie(s)" onclick ="return OpenReply(@i)" /> </p>

                <div id="@("divrep" + i.ToString())" style="display:none">
                    <table>

.....

     }
}

This doesn’t access the div inside the td. I think I need to use jquery for this.

AidyF

onclick ="return OpenReply(@i)"

had syntax error with it. Are you using razor for this?

Did you add the declaration for "i" above the "for" loop?

This one? 

AidyF

int i = 0;

Yes I did…

What error are you getting?

It just saying syntax error when you focus your mouse on it but I tried to remove the @ annotation , it clears the error and I run it but nothing happens.

Well you get the gist anyway…you need to add an index of some sort to the div so that each div is unique

div1, div2 etc

then pass that index in the click event of the button in the loop

onclick="yourMethod(1)"

and then yourMethod adds the index to the base div id

getElementById("div" + i)

Now I got it working. I asked my buddies at SO, they give me this its jquery

$(function () {
            $('.Reply').click(function () {
                $(this).closest('p').next('.divrep').show();
               
            });
        });

and I need to use class instead of the Ids of input button and the div element to

<input type="button" class ="Reply" name="Reply" value="Replie(s)"  />
 <div class ="divrep" style="display:none">

I’m not yet really fluent with javascript and jquery but I still have one more task to do which how to implement the if else statement on that jquery code so I can close the div element back when I click the button again. Do you know how to do this?

Hi timmack,

Please post a new thread for your new issue, and mark current thread.

Best Regards,

Kevin Shen.

Leave a Reply