Putting an button on each line item & updating list with calculated column

Recently I was working on a feature which required me to put a button on every item in the SharePoint list's view. The button name was Assign Me. When clicked, it should update the item and put the current logged in user in the Assigned To field.

I followed a hybrid approach. calculated column and custom JavaScript. I tried doing everything in calculated column. Even though calculated columns allow writing code in JavaScript, they still have some limitations. One of the biggest hurdle is to get the ID of the item. Since calculated columns do not allow ID column, you have to be innovative. I figured out that the checkbox column in every line item has id in the

tag. This is always the first column in the view (first td in the tr).

Following are the steps I followed to achieve the desired result. 

Step 1. Create a new calculated column with output as Number. 

Step 2. Put the following formula. I use Typescript, hence replace class name with your's in the below formula. 

Step 3. Add a script editor to your page and link your .js file.
Step 4. In the Typescript file, following are the two functions.

     initAssignMe(trObj) {
        var oSelf = YourClassName;
        try {
            console.log(trObj.childNodes[0].childNodes[0].title); //This gives you ID
            var itemID = trObj.childNodes[0].childNodes[0].title;
            if (confirm('Do you want to assign the current task to yourself?')) {
                //I am using some fancy stuff to block the entire UI while I update the item.
                $.blockUI({ 
                    css: {
                        padding: '5px 0 5px 0',
                        margin: 0,
                        width: '20%',
                        top: '40%',
                        left: '40%',
                        textAlign: 'center',
                        color: '#000',
                        border: '3px solid #aaa',
                        backgroundColor: '#fff',
                        cursor: 'wait'
                    },
                    message: "Assigning Task",
                    fadeIn: 1000,
                    timeout: 3000,
                    onBlock: function () {
                        oSelf.prototype.updateTask(itemID);
                    }
                });                
            }
        } catch (e) { YourUtilClass.Log(window.location.href.substr(0, 254), "YourClassName - initAssignMe", e.message, e.stack); }
    }

    updateTask(itemID) {
        try {
            var ctx = SP.ClientContext.get_current();
            var oWeb = ctx.get_web();
            var SWTList = oWeb.get_lists().getByTitle('YOUR TASK LIST');
            var oListItem = SWTList.getItemById(itemID);

            oListItem.set_item('Task_x0020_Owner', _spPageContextInfo.userId);
            oListItem.update();
            ctx.load(oListItem);
            ctx.executeQueryAsync(function () {
                alert('Task assigned successfully!');
                window.location.reload();
            },
                function (sender, args) {
                    YourUtilClass.Log(window.location.href.substr(0, 254), "YourClassName updateTask (CSOM)", args.get_message(), args.get_stackTrace());
                    alert('Something went wrong!');
                }
            );
        } catch (e) { YourUtilClass.Log(window.location.href.substr(0, 254), "YourClassName updateTask", e.message, e.stack); }
    }

Once done, you should see a button 'Assign Me' in every line item. 

Hope this helps!

-Vighnesh