Question

我有一个小脚本创建一个表格悬停div，这个脚本创建<tr>和<td>动态地取决于<div>的宽度和高度这是从一个对于句子但是appendTo被执行了两次，在下一个图像中我们可以看到我放在元素中的属性和id是重复的，这个属性对应于“for”变量的值。

这是我的完整页面：

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="styles.css">
	<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
</head>
<body>

<div id="content-map">
	<img id="main-reference" src="puestos.png" style="display: none; visibility: hidden"/>
</div>

</body>
<script>
	var table = '<table id="grilla" cellspacing="0" cellpadding="0"></table>';
	var tr = '<tr id="current-row"><tr>';
	var td = '<td><td>';
	var maxHeight = 1200;
	var maxWidth = 700;
	var height = $( "#main-reference" ).get( 0 ).naturalWidth;
	var width = $( "#main-reference" ).get( 0 ).naturalHeight;

	if ( maxHeight > height && maxWidth > width ) {
		$( "#content-map" ).css( { "width": width, "height": height } );
	} else {
		$( "#main-reference" ).css( { "display": "block" } );
		$( "#content-map" ).css( { "width": $( "#main-reference" ).width(), "height": $( "#main-reference" ).height() } );
	}

	var finalHeight = $( "#content-map" ).height();
	var finalWidth = $( "#content-map" ).width();
	var numberOfRows = Math.floor( finalHeight / 30 );
	var numberOfCols = Math.floor( finalWidth / 30 );
	var tdHeight = finalHeight / numberOfRows;

	$( "#main-reference" ).css( { "display": "none" } );
	$( table ).appendTo( "#content-map" );

	for ( var i = 0; i <= numberOfRows; i++ ) {
		$( tr ).appendTo( "#grilla" ).attr( "row-number", i );
		for ( var j = 0; j <= numberOfCols; j++ ) {
			console.log( "numberOfCols[" + numberOfCols + "]" + ":" + j );
			$( td ).appendTo( "#current-row" ).css( { "height": tdHeight } ).attr( "id", j );
		}
		$( "#current-row" ).removeAttr( "id" );
	}
</script>
</html>

并导致：

Answer 1

您需要关闭tr和td元素：

var tr = '<tr id="current-row"></tr>';
var td = '<td></td>';

Jquery appendTo（）将元素追加两次

1 个答案: