0

I am creating the HTML table using the rest api SharePoint. I want to add a check box for each row and on the selection of check box want to do the CURD operations. What to do?

1 Answer 1

1

You can insert a control of “type=‘checkbox ’” before each row of the table. Here is an example that get list items from list and display checkbox for each row ,delete items by getting the id of the item which checkbox is selected:

<table id='GetALLItems'>

</table>
<button onclick="GetAllListItems();" type="button">GetAllListItems</button>
<button onclick="DeleteItemFromList();" type="button">DeleteItemFromList</button>
<script src="https://MyServer/sites/SiteCollection/style library/js/ScriptFile.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function GetAllListItems() {
    $.ajax
        ({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('New List Title')/items?$select=Id,Name",
            type: "GET",
            headers:
        {
            "Accept": "application/json;odata=verbose"
        },
            success: function (data, status, xhr) {
                var dataresults = data.d.results;
                  var getallItems='<tr><td>'+'checkbox'+'</td><td>'+'Name'+'</td><td>'+'Id'+'</td></tr>';
                for (var i = 0; i < dataresults.length; i++) {
                                getallItems+='<tr><td>'+"<input type='checkbox' name='chk' value='false'>"+'</td><td>'+dataresults[i]['Name']+'</td><td>'+dataresults[i]['Id']+'</td></tr>';
                                document.getElementById('GetALLItems').innerHTML=getallItems;
                }
                                                
                                                
            },
            error: function (xhr, status, error) {
                console.log("Failed");
            }
        });
}

function DeleteItemFromList() {
    GetItemId();
}

function GetItemId() {
                var checkLength = $("input:checkbox[name='chk']:checked").length;
                var chkvalue='';
            if(checkLength == 0) {
                alert("Please select at least one piece of data!");
                return;
            }
            $("input[type='checkbox']").each(function(){
                if($(this).prop("checked")){
                                                chkvalue=$(this).parent().parent().find("td").eq(2).text();;
                    DeleteListItemUsingItemId(chkvalue);
                }
            });
}
function DeleteListItemUsingItemId(Id) {
    $.ajax
        ({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('New List Title')/items(" + Id + ")",
            type: "POST",
            headers:
        {
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
            "IF-MATCH": "*",
            "X-HTTP-Method": "DELETE",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },

            success: function (data, status, xhr) {
                console.log("Success");
            },
            error: function (xhr, status, error) {
                console.log("Failed");
            }
        });
}
</script>
1
  • Thanks @Raythoenxie-MSFT
    – Liz
    Commented Mar 1, 2022 at 9:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.