2
我在JavaScript中遇到了一個小問題，我暫時停留了一段時間。 我做的是：在生成的表中激發onkeyup with contenteditable
- 創建一個空表。
在表中生成tr/td標記和值（來自JSON對象）。
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$); }- 表看起來很好：
TD CONTENTEDITABLE = 「真」 的onkeyup = 「updateJSON（3,0）」>提米/ TD>
生成表時，會出現問題我編輯一個字段。 'onkeyup'在它應該的時候不會'開火'。用'onclick'代替'onkeyup'就可以。我不知道爲什麼這不起作用，任何人都可以幫忙嗎？
var myList = [
{
"id": 1,
"name": "arnold"
},
{
"id": 2,
"name": "hans"
},
{
"id": 3,
"name": "jack"
},
{
"id": 4,
"name": "Peter"
}];
\t function loadDoc3() {
\t \t \t \t $("#RelationDataTable tr").remove();
\t \t \t \t buildHtmlTable('#RelationDataTable');
\t }
\t // Builds the HTML Table out of myList.
\t function buildHtmlTable(selector) {
\t \t var columns = addAllColumnHeaders(myList, selector);
\t \t for (var i = 0 ; i < myList.length ; i++) {
\t \t \t var row$ = $('<tr/>');
\t \t \t for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
\t \t \t \t var cellValue = myList[i][columns[colIndex]];
\t \t \t \t if(colIndex == columns.indexOf("type"))
\t \t \t \t {
\t \t \t \t \t
\t \t \t \t \t var box$ = $('<td/>');
\t \t \t \t \t if(cellValue == "Organisation")
\t \t \t \t \t box$.addClass("uk-badge uk-badge-danger");
\t \t \t \t \t else
\t \t \t \t \t box$.addClass("uk-badge uk-badge-primary");
\t \t \t \t \t box$.html(cellValue);
\t \t \t \t \t row$.append(box$);
\t \t \t \t \t
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t var box$ = $('<td/>');
\t \t \t \t \t box$.html(cellValue);
box$.attr('contenteditable','true');
\t \t \t \t \t box$.attr('onkeyup','updateJSON('+colIndex+','+i+')');
\t \t \t \t \t //box$.click(function() {
// alert("Handler for .keyup() called.");
//});
\t \t \t \t \t row$.append(box$);
\t \t \t \t }
\t \t \t \t
\t \t \t }
\t \t \t $(selector).append(row$);
\t \t
\t \t }
\t }
\t var currentcolumns = [];
\t // Adds a header row to the table and returns the set of columns.
\t // Need to do union of keys from all records as some records may not contain
\t // all records
\t function addAllColumnHeaders(myList) {
\t \t var columnSet = [];
\t \t var headerTr$ = $('<tr/>');
\t \t for (var i = 0 ; i < myList.length ; i++) {
\t \t \t var rowHash = myList[i];
\t \t \t for (var key in rowHash) {
\t \t \t \t if ($.inArray(key, columnSet) == -1 && key != "id") {
\t \t \t \t \t columnSet.push(key);
\t \t \t \t \t headerTr$.append($('<th/>').html(key));
\t \t \t \t }
\t \t \t }
\t \t }
\t \t $("#RelationDataTable").append(headerTr$);
\t \t currentcolumns = columnSet;
\t \t return columnSet;
\t }
\t function updateJSON(xx,y)
\t {
\t \t var cellValue = myList[y][currentcolumns[xx]];
\t \t alert(document.getElementById("RelationDataTable").rows[y+1].cells[xx].firstChild.nodeValue);
\t \t myList[y][currentcolumns[xx]] = document.getElementById("RelationDataTable").rows[y+1].cells[xx].firstChild.nodeValue;
\t \t x = 2;
\t }<head>
\t <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">
\t \t \t \t \t \t <thead>
</thead>
<tbody>
</tbody>
\t \t \t \t \t \t </table>
</body>
你檢查了JQuery [keyup]（https://api.jquery.com/keyup/）函數嗎？ –
我嘗試了以下，但它不會生成帶有onkeyup標記的html /或觸發onkeyup事件： var box $ = $（'
你可以公開更多的代碼嗎？也許創建一個codepen或jsfiddle，以便我們可以看到它的行動。 –