Hier schon mal eine Demo, die die Kreise anordnet:
Code
<style>
.circle {
border-radius: 50%;
background-color: lightblue;
position: absolute;
}
#table-circles td {
width: 20px;
height: 20px;
}
</style>
<table id="table-circles">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>3</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<script>
var radius = 5, // Radius, in dem die Kreise angeordnet werden sollen
radCircle = 3, // Radius der angezeigten Kreise
cellX = 2, cellY = 2; // Position der Zelle, in der der Wert steht
var theTable = document.getElementById('table-circles'),
theCell = theTable.rows[cellY].cells[cellX],
wCell = theCell.offsetWidth, hCell = theCell.offsetHeight;
theCell.style.position = 'relative';
var nrCircles = parseInt(theCell.textContent);
var deltaRad = Math.PI * 2 / nrCircles;
theCell.innerHTML = '';
for (var i = 0, rad = 0; i < nrCircles; i++ , rad += deltaRad) {
var circle = document.createElement('div');
circle.className = 'circle';
var deltaX = radius * Math.sin(rad),
deltaY = radius * Math.cos(rad);
if (nrCircles == 1) deltaX = deltaY = 0;
var x = wCell / 2 - radCircle + deltaX,
y = hCell / 2 - radCircle - deltaY;
circle.style.left = x + 'px';
circle.style.top = y + 'px';
circle.style.width = circle.style.height = 2 * radCircle + 'px';
theCell.appendChild(circle);
}
</script>
Alles anzeigen