使用 contenteditable 在生成的 table 中触发 onkeyup

Question

我的 javascript 中有一个小问题，我已经坚持了一段时间了。我所做的是：

创建一个空 table。

在 table（来自 JSON-object）中生成 tr/td 标签和值。

for (var i = 0 ; i < myList.length ; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
        var cellValue = myList[i][columns[colIndex]];

        if(colIndex == columns.indexOf("type")) 
        {

            var box$ = $('<td/>');
            if(cellValue == "Organisation")
            box$.addClass( "uk-badge uk-badge-danger" );
            else
            box$.addClass( "uk-badge uk-badge-primary" );
            box$.html(cellValue);
            row$.append(box$);

        } 
        else 
        { 
            var box$ = $('<td/>');
            box$.html(cellValue);
            box$.attr('contenteditable','true');
            box$.attr('onkeyup','updateJSON('+colIndex+','+i+')');
            row$.append(box$);
        }


    }
    $(selector).append(row$);

}

table 看起来不错：

td contenteditable="true" onkeyup="updateJSON(3,0)">Timmy/td>

生成 table 并且我编辑字段时出现问题。 'onkeyup' 不应该 'fire'。将 'onkeyup' 替换为 'onclick' 就可以了。我不知道为什么这不起作用，有人可以帮忙吗？

var myList = [
  {
    "id": 1,
    "name": "arnold"
  },
  {
    "id": 2,
    "name": "hans"
  },
  {
    "id": 3,
    "name": "jack"
  },
  {
    "id": 4,
    "name": "Peter"
  }];

 function loadDoc3() {
    $("#RelationDataTable tr").remove();
    buildHtmlTable('#RelationDataTable');
 }

 // Builds the HTML Table out of myList.
 function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0 ; i < myList.length ; i++) {
   var row$ = $('<tr/>');
   for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
    var cellValue = myList[i][columns[colIndex]];

    if(colIndex == columns.indexOf("type")) 
    {
     
     var box$ = $('<td/>');
     if(cellValue == "Organisation")
     box$.addClass( "uk-badge uk-badge-danger" );
     else
     box$.addClass( "uk-badge uk-badge-primary" );
     box$.html(cellValue);
     row$.append(box$);
     
    } 
    else 
    { 
     var box$ = $('<td/>');
     box$.html(cellValue);
                    box$.attr('contenteditable','true');
     box$.attr('onkeyup','updateJSON('+colIndex+','+i+')');
     //box$.click(function() {
//  alert( "Handler for .keyup() called." );
//});
     row$.append(box$);
    }

    
   }
   $(selector).append(row$);
  
  }
 }
 var currentcolumns = [];


 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(myList) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0 ; i < myList.length ; i++) {
   var rowHash = myList[i];
   for (var key in rowHash) {
    if ($.inArray(key, columnSet) == -1 && key != "id") {
     columnSet.push(key);
     headerTr$.append($('<th/>').html(key));
    }
   }
  }
  $("#RelationDataTable").append(headerTr$);
  currentcolumns = columnSet;
  return columnSet;
 }
 function updateJSON(xx,y)
 {
  var cellValue = myList[y][currentcolumns[xx]];
  alert(document.getElementById("RelationDataTable").rows[y+1].cells[xx].firstChild.nodeValue);
  myList[y][currentcolumns[xx]] = document.getElementById("RelationDataTable").rows[y+1].cells[xx].firstChild.nodeValue;
  x = 2;
 }

<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>
<body>
<input id="searchname" type="text" name="InsertSearchname" onkeyup="loadDoc3()"><h2>Search Contact</h2>
<table id="RelationDataTable">
      <thead>
                            </thead>
                            <tbody>
                            </tbody>
      </table>
  </body>

Answer 1

contenteditable="true" 应该为您的 <td> 元素设置，而不是 <table>.

否则td不会触发事件

所以在你的循环中添加 box$.attr('contenteditable','true');。

使用 contenteditable 在生成的 table 中触发 onkeyup

Fire onkeyup in generated table with contenteditable

html

javascript

jquery

onkeyup