Get Current rows cells values one by one on "BindingSelectionChanged" event from table in html form in Word using office.js

Question

Hello I am creating a application using office.js which will be used in excel and word application addIn and I have written some code that actually gives the text of entire row cell by cell. but as my requirement was to maintain styles and of every cell and store them in database so that when again addin runs it should load the data in same format it was stored. Currently it is just text i am getting in response. I have asked a similar question like this which was to get the text with styles from current cell that really works great. How do I get the formatting the Current cell of the table in Word using office.js

There is another thing if it is possible to get the cell html by row and column position that will also solve the problem. Thank you!

Answer 1

Hi i found the solution of my problem but this is solution for word only this is not working in excel but this was working for me so i am writing here :-

   function Addtable() {
    var document = Office.context.document;
    var headers = [["Cities"]];
    var rows = [['<b>Hello there</b> <ul><li>One</li><li>Two</li></ul>'], ['Roma'], ['Tokyo'], ['Seattle']];
    var html = '<table>';
    html += '<thead>';
    for (var i = 0; i < headers.length; i++) {
        html += '<tr>';
        var cells = headers[i];
        for (var j = 0; j < cells.length; j++) {
            html += '<th>' + cells[j] + '</th>';
        }
        html += '</tr>';
    }
    html += '</tr>';
    html += '</thead>';
    html += '<tbody>';
    for (var i = 0; i < rows.length; i++) {
        html += '<tr>';
        var cells = rows[i];
        for (var j = 0; j < cells.length; j++) {
            html += '<td>' + cells[j] + '</td>';
        }
        html += '</tr>';
    }
    html += '</tbody>';
    html += '</table>';

    Office.context.document.setSelectedDataAsync(html, { coercionType: Office.CoercionType.Html }, function (asyncResult) {
        document.bindings.addFromSelectionAsync(Office.BindingType.Table, function (result) {
            console.log(result);

            var binding = result.value;
            binding.addHandlerAsync(Office.EventType.BindingSelectionChanged, onBindingSelectionChanged);
        });
    });
}

The above is the function that i call when i want to generate a table with html values in it.

and bellow is is code that i am using to get the value of the current cell and replacing with some dummy value.

  var onBindingSelectionChanged = function (results) {
    if (!isExecuted) {
        Word.run(function (context) {
            var tableCell = context.document.getSelection().parentTableCell;
            context.load(tableCell);

            return context.sync()
                .then(function () {
                    if (tableCell.isNull == true) {
                        //selection is not within a cell..... 
                        console.log("selection not in a header");
                    }
                    else {
                        // the selection is inside a cell! lets get the content....
                        var body = tableCell.body;
                        var html = tableCell.body.getHtml();

                        var tableHtml = tableCell.body.getHtml();

                        context.sync()
                           .then(function () {
                               var cellHtml = html.value;
                               var newHtml = "<table><tr><td><ul><li>yellow</li></ul></td></tr></table";

                               // Option 1
                               body.insertHtml(newHtml, Word.InsertLocation.replace);

                               // Option 2
                               //body.clear();
                               //body.insertHtml(newHtml, Word.InsertLocation.end);

                               return context.sync().then(function () {
                                   console.log('HTML was successfully replaced.');
                               }).catch(function (e) {
                                   console.log(e.message);
                               });
                           }).catch(function (e) {
                               console.log(e.message);
                           });

                    }
                }).catch(function (e) {
                    console.log(e.message);
                });
        });
        isExecuted = true;
    }
    else {
        isExecuted=false;
    }

};

Thank you!