HTML table with select option

Question

The goal is to create an HTML table with headers etc, but I want to be able to select a row (for ID) so I can update / remove list items at the selected row.

This is what I did so far:

    while (ListEnumerator.moveNext()) {
        var currentItem = ListEnumerator.get_current();
        var Fornamn = currentItem.get_item('Title');
        var Efternamn = currentItem.get_item('_x0074_l26');
        var Startdatum = currentItem.get_item('vpux');
        var Slutdatum = currentItem.get_item('oobz');
        var Omfattning = currentItem.get_item('Omfattning');
        var Status = currentItem.get_item('Status');
        var Ansvarig = currentItem.get_item('ildw');
        var row = document.createElement("tr");

        txtHTML = txtHTML + "<tr>";
        txtHTML = txtHTML + "<td>";
        if (Fornamn != null) {
            txtHTML = txtHTML + "<p>" + Fornamn + "</p>";
        }
        txtHTML = txtHTML + "</td>";

        txtHTML = txtHTML + "<td>";
        if (Efternamn != null) {
            txtHTML = txtHTML + "<p>" + Efternamn + "</p>";
        }
        txtHTML = txtHTML + "</td>";

        txtHTML = txtHTML + "<td>";
        if (Startdatum != null) {
            txtHTML = txtHTML + "<p>" + Startdatum.format("yyyy-MM-dd") + "</p>";
        }
        txtHTML = txtHTML + "</td>";

        txtHTML = txtHTML + "<td>";
        if (Slutdatum != "") {
            txtHTML = txtHTML + "<p>" + Slutdatum.format("yyyy-MM-dd") + "</p>";
        }
        txtHTML = txtHTML + "</td>";
        txtHTML = txtHTML + "<td>";
        if (Status != null) {
            txtHTML = txtHTML + "<p>" + Status + "</p>";
        }
        txtHTML = txtHTML + "</td>";
        txtHTML = txtHTML + "<td>";
        if (Omfattning != null) {
            txtHTML = txtHTML + "<p>" + Omfattning * 100 + "%" + "</p>";
        }
        txtHTML = txtHTML + "</td>";
        txtHTML = txtHTML + "<td>";
        if (Ansvarig != null) {
            txtHTML = txtHTML + "<p>" + Ansvarig + "</p>";
        }
        txtHTML = txtHTML + "</td>";
        txtHTML = txtHTML + "</tr>";
    }
    $("#tblViewIssues").append(txtHTML);
}

Answer 1

Give list item id to row id (with some prefix if you need). After creating the table create event-listener for changed item.

Update the list item, by getting parent row id(row id will be same as list item id) and content inside the row using jQuery.

for deleting you can have one extra column with

<td class='delete'>X</td> or <td class='delete'>Delete</td>

Create on click event for this using class delete and get the parent row id and delete the list item using that id.

These operation you can complete using CSOM

Updating List Item

// Starting with ClientContext, the constructor requires a URL to the 
// server running SharePoint. 
ClientContext context = new ClientContext("http://SiteUrl"); 

// Assume that the web has a list named "Announcements". 
List announcementsList = context.Web.Lists.GetByTitle("Announcements"); 

// Assume there is a list item with ID=1. 
ListItem listItem = announcementsList.Items.GetById(1); 

// Write a new value to the Body field of the Announcement item.
listItem["Body"] = "This is my new value!!"; 
listItem.Update(); 

context.ExecuteQuery();

Deleting List Item.

// Starting with ClientContext, the constructor requires a URL to the 
// server running SharePoint. 
ClientContext context = new ClientContext("http://SiteUrl"); 

// Assume that the web has a list named "Announcements". 
List announcementsList = context.Web.Lists.GetByTitle("Announcements"); 

// Assume that there is a list item with ID=2. 
ListItem listItem = announcementsList.GetItemById(2); 
listItem.DeleteObject(); 

context.ExecuteQuery(); } 

Reffer bellow link for more CSOM operations.

https://msdn.microsoft.com/en-us/library/office/fp179912.aspx