如何在javascript中获取可编辑的td值

时间:2016-09-16 12:22:14

标签: javascript jquery html

我是一个表格,其中我将td标记为可编辑我也为其分配了唯一的ID,但在javascript方面我无法获得值(innerText)。这是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>

这就是我试图在javascript端获取文本的方式:

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

结果始终显示为空字符串。有人可以建议一个正确的方法。我想为firefox和chrome实现这个。

----------------完整代码---------

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);

  ......
  }

1 个答案:

答案 0 :(得分:2)

你应该使用逻辑“||” OR运算符而不是按位或“|”操作

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>