Question

我的javascript中有一个小问题，我现在已经停留了一段时间。我做的是：

创建一个空表。

在表格内生成tr / td标签和值（来自JSON-object）。

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 =“true”onkeyup =“updateJSON（3,0）”＆gt; Timmy / td＆gt;

生成表格并编辑字段时会出现问题。 'onkeyup'虽然不应该“开火”。用'onclick'替换'onkeyup'就可以了。我不知道为什么这不起作用，有人可以帮忙吗？

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>。{/ p>

否则td将不会触发事件。

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

在生成的桌上射击onkeyup与contenteditable

1 个答案: