save data from html table to sharepoint list

Question

I have a html table which holds some data and has a submit button at the bottom of the table.I am trying to save this data of table on button click to SharePoint 2013 list which is having same columns as table fields. How to follow for this kind of scenario to save table data to sharepoint list.(Explain with example also will be so helpful to me)

Answer 1

Here is a client side solution.

First, get all table data and put them into an array, let's call it dataCollection. Each element in dataCollection is an object that represents a list item in the target list. The object might be like:

{
    "field1": "field1 value",
    "field2": "field2 value"
}

Second, loop through dataCollection, in the loop, create a list item object and save it to list.

Here is the code to create a list item:

function createListItem(siteUrl, fieldValues) {
    var clientContext = new SP.ClientContext(siteUrl);
    var list = clientContext.get_web().get_lists().getByTitle('Your list title'); // You can also get list by id

    // Create a list item
    var itemCreateInfo = new SP.ListItemCreationInformation();
    listItem = list.addItem(itemCreateInfo);

    // Set table data to list item
    for (var field in fieldValues) {
        if (fieldValues.hasOwnProperty(field) {
            listItem.set_item(field, fieldValues[field]);
        }
    }

    listItem.update();

    // Save list item to list
    clientContext.load(listItem);
    clientContext.executeQueryAsync(function (sender, args) {
        // Current list item is successfully saved to list
    }, function (sender, args) {
        // Error!
    });
}

You can call this function like:

for (var i = 0, length = dataCollection.length; i < length; i++) {
    createListItem(siteUrl, dataCollection[i]);
}

Notes:

1. You don't need to create clientContext/list again and again, they can be passed to createListItem as parameters or created as variables outside the function.
2. If your html table and target list are in the same web, then siteUrl is not necessary. You can change code to var clientContext = SP.ClientContext.get_current();.
3. If your html table is in an app web and target list is in a host web, then getting the list is a little different, here is a demo.