How to get editable td value in javascript

Question

I a table in which i mark td as a editable i assign a unique id to it as well but in javascript side i unable to get the value(innerText). Here is html:

<td style="text-align: left" id="145_no" contenteditable="true" ng-blur="editTranslation(ft)" class="glowing-border ng-binding"><font><font>some value which user write</font></font></td>

This is how i tried to get text in javascript side:

var tdElem = document.getElementById ( "145_no" );
 var tdText = tdElem.innerText | tdElem.textContent;

result always shows as empty string. Can someone suggest a proper way. I want to implement this for both firefox and chrome.

---------------- complete code---------

html:

  <tr class="statistics_table_row cursor"
                        data-ng-repeat="ft in flagsWithTranslation | filter:{language:'no'} | orderBy:'flag'">
                        <td width="20%" style="text-align: left">{{ ft.flag }}</td>
                        <td style="text-align: left" id="{{ft.id}}_{{ft.language}}" contentEditable="true"
                            ng-blur="editTranslation(ft)" class="glowing-border">{{ ft.translation }}
                        </td>
                    </tr>

javascript:

 $scope.editTranslation = function (flagTranslation) {
    var editTranslation = "", temp = "";
    var tdElem = document.getElementById ( flagTranslation.id + "_" + flagTranslation.language );
    var tdText = tdElem.innerText || tdElem.textContent;
    $log.info("tdText: " + tdText);

  ......
  }

A.T. · Accepted Answer · 2016-09-16 12:28:14Z

3

you should use logical "||" OR operator rather than bitwise or "|" operator

function editTranslation(){
var tdElem = document.getElementById("145_no" );
 var tdText = tdElem.innerText || tdElem.textContent; 
  console.log(tdText);
  }

<table>
  <tr>
<td style="text-align: left" id="145_no" contenteditable="true" onblur="editTranslation()" class="glowing-border ng-binding"><font><font>some value which user write</font></font></td>
  </tr>
  </table>

answered Sep 16, 2016 at 12:28

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A.T. Over a year ago

@user526206 do you see any error in console, it should work. Try to run the code snippet above,

user526206 Over a year ago

Yea it is working here. but somehow not in my application and there is no error in console..

A.T. Over a year ago

so that's the first lead for your solution, further investigation is required at your end

user526206 Over a year ago

i just updated question with actual code. I am not getting it where is a mistake. Can you please have a look in to it.

Collectives™ on Stack Overflow

How to get editable td value in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related