When I click edit, only top row shows-CodePudding

In the second foreach loop I have a dropdown list I want to display when I press the edit button. I want to display the dropdown list for which row I want to edit, right now it displays the top row matter the edit button I click. I guess I need to clarify each foreach value with an Id and connect each edit button with that id, but I don't know how. any help is appreciated.

index.cshtml

<table id="tblCustomers" >
        <tbody>
            @foreach (var item in Model.Organisations)
            {
                <tr>
                    <td>
                        <span>@item.HsaId</span>
                    </td>
                    <td>
                        <span>@item.OrgsName</span>
                    </td>
                    <td >
                        <span>@item.PartnersLgId</span>
                        <div id="lgpartners">
                            <select multiple="multiple">
                                @foreach (var p in Model.Partners)
                                {
                                    <option>@p.LgId</option>
                                }
                            </select>
                        </div>
                    </td>
                    <td>
                        <a id="Edit" onclick="becomevisible()">Edit</a>
                        <a id="Update" style="display:none">Update</a>
                        <a id="Cancel" style="display:none" onclick="becomehidden()">Cancel</a>
                        <a id="Delete">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>

javascript.js

function becomevisible() {
    document.getElementById("lgpartners").style.display = "block";
}

function becomehidden() {
    document.getElementById("lgpartners").style.display = "none";
}

I have searched on Google and tried finding the answer to my question but haven't found one I liked yet

CodePudding user response：

IDs need to be UNIQUE

You really need to delegate.

Also IF you use A as a button, add a href to get the pointer cursor

Note I use hidden instead of display:none and changed all IDs to class

You can toggle a class that contains display: hidden/block instead

If you want to delete the row, you just need

if (tgt.matches(".Delete")) {
  parent.remove();
}

window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("tblCustomers").addEventListener("click", e => {
    const tgt = e.target;
    const parent = tgt.closest("tr");
    if (tgt.matches(".Edit")) {
      parent.querySelector(".lgpartners").hidden = false;
      parent.querySelector(".Cancel").hidden = false;
    }
    else if (tgt.matches(".Cancel")) {
      tgt.hidden = true;
      parent.querySelector(".lgpartners").hidden = true;
    }
  })
})

<table id="tblCustomers" >
  <tbody>
    <tr>
      <td>
        <span>@item.HsaId</span>
      </td>
      <td>
        <span>@item.OrgsName</span>
      </td>
      <td >
        <span>@item.PartnersLgId</span>
        <div  hidden>
          <select multiple="multiple">
            <option>@p.LgId</option>
            <option>@p.LgId</option>
            <option>@p.LgId</option>
          </select>
        </div>
      </td>
      <td>
        <a href="#" >Edit</a>
        <a href="#"  hidden>Update</a>
        <a href="#"  hidden>Cancel</a>
        <a href="#" >Delete</a>
      </td>
    </tr>
    <tr>
      <td>
        <span>@item.HsaId</span>
      </td>
      <td>
        <span>@item.OrgsName</span>
      </td>
      <td >
        <span>@item.PartnersLgId</span>
        <div  hidden>
          <select multiple="multiple">
            <option>@p.LgId</option>
            <option>@p.LgId</option>
            <option>@p.LgId</option>
          </select>
        </div>
      </td>
      <td>
        <a href="#" >Edit</a>
        <a href="#"  hidden>Update</a>
        <a href="#"  hidden>Cancel</a>
        <a href="#" >Delete</a>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

The issue is because you're repeating the same id in the content you create in the loop. This is causing duplicate id attributes in the DOM, which is invalid. They must be unique.

To fix this, use class attributes on the repeated elements instead. You will also need to amend your JS logic to traverse the DOM to find content related to the client element instead of selecting it directly.

Below is a working example of how to do this. Note the use of addEventListener() instead of inline event handlers. The latter are no longer good practice and should be avoided where possible.

Also note that I used a class on the tr to control the visibility of the relevant buttons in CSS.

document.querySelector('#tblCustomers').addEventListener('click', e => {
  const tr = e.target.closest('tr');
  
  if (e.target.matches('.edit'))  
    editRow(tr);
    
  if (e.target.matches('.cancel'))  
    cancelEditRow(tr);
});

const editRow = tr => tr.classList.add('editing');
const cancelEditRow = tr => tr.classList.remove('editing');

tr .lgpartners,
tr .update,
tr .cancel {
  display: none;
}

tr.editing .lgpartners,
tr.editing .update,
tr.editing .cancel {
  display: inline;
}
tr.editing .edit,
tr.editing .delete {
  display: none;
}

<table id="tblCustomers" >
  <tbody>
    <tr>
      <td>
        <span>@item.HsaId</span>
      </td>
      <td>
        <span>@item.OrgsName</span>
      </td>
      <td >
        <span>@item.PartnersLgId</span>
        <div >
          <select multiple="multiple">
            <option>@p.LgId</option>
          </select>
        </div>
      </td>
      <td>
        <a >Edit</a>
        <a >Update</a>
        <a >Cancel</a>
        <a >Delete</a>
      </td>
    </tr>
    <tr>
      <td>
        <span>@item.HsaId</span>
      </td>
      <td>
        <span>@item.OrgsName</span>
      </td>
      <td >
        <span>@item.PartnersLgId</span>
        <div >
          <select multiple="multiple">
            <option>@p.LgId</option>
          </select>
        </div>
      </td>
      <td>
        <a >Edit</a>
        <a >Update</a>
        <a >Cancel</a>
        <a >Delete</a>
      </td>
    </tr>
  </tbody>
</table>