Puede haber algunos casos en los que tengamos el requisito de agregar elementos de manera horizontal. Por ejemplo, si sus elementos son Nodes de lista vinculados y desea agregarlos horizontalmente.
Ahora surge la pregunta de cómo podemos hacer esto de una mejor manera.
Un enfoque puede ser usar la propiedad «mostrar» con el valor «cuadrícula en línea» como se muestra en el siguiente programa:
Cuando el usuario hace clic en el botón para agregar el Node. El Node comienza a anteponerse en la lista vinculada secuencialmente. Para conseguirlo hemos creado el “div” con la propiedad “display” cuyo valor le hemos dado como “inline-grid”.
Ejemplo 1
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<center>
<h1 style="color:green">
Inserting node horizontally
</h1>
</center>
<br><br>
<h1>click to insert</h1>
<div>
<input type = 'button'
onclick = 'javascript: insert()' value = 'insert'>
<br>
</div>
<br><br><br><br>
<div id = 'division'
style = 'min-width: 300px; min-height: 80px;'>
</div>
</div>
<style>
@keyframes addnode {
from
{
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}
</style>
<script>
var array = [];
var number =1 ;
function insert()
{
var div = document.createElement('div');
div.innerHTML = number;
document.getElementById('division').prepend(div);
div.style = 'min-width: 80px; height: 80px;
border: 4px solid green; display: inline-grid;
text-align: center;background:
green;border-radius: 50%;animation-name: addnode;
animation-duration: 2s;animation-direction: all;
transition-property: transform;
transform: translateX(200px);';
array.push(number);
number++;
div.addEventListener('animationend', function() {
});
}
</script>
</body>
</html>
Producción:
Explicación del código
: hemos creado un
html
“<div>”
elemento con id como «división» que será nuestra división principal en la que agregaremos diferentes «div» como Node. En la función “insertar()” hemos creado el.
html
“<div>”
que será el elemento de nuestra lista enlazada, hemos agregado un «número» que comenzará desde 1 y se incrementará a medida que agreguemos más elementos en la lista. Para que el Node se anteponga horizontalmente, hemos utilizado la propiedad de visualización con el valor «inline-grid».
Pero hay un problema aquí en esta solución, ya que seguimos agregando elementos en la lista después de cierto Node, los elementos comienzan a saltar a la línea que no se desea. Esto es lo que se demuestra en el resultado a continuación.
¿Qué sucede si queremos agregar todos los Nodes en una sola línea?
Otro enfoque:
en este enfoque, para lograr lo mismo que hemos utilizado
html
“<table>”.
Entonces, la idea es que en una tabla podamos crear una fila de tabla, es decir
html
” <tr>”
y para agregar cada Node crearemos datos de tabla, es decir
html
”<td>”
. Entonces, habrá un «tr» y cada Node será tratado como
html
“<td>”
. Entonces, de esta manera se puede agregar un número infinito de Nodes usando una tabla.
Podemos ver su implementación a través del programa.
Ejemplo- 2:
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<center>
<h1 style="color:green">
Inserting node horizontally
</h1>
</center>
<br><br>
<h1>click to insert</h1>
<div id = 'division'
style = 'visibility: visible;
position: absolute; margin-top: 0px;'>
<div>
<input type = 'button'
onclick = 'javascript: insert()' value = 'insert'>
<br>
</div>
<br><br><br><br>
<table>
<tr id = 'tablerow'>
<td id = 'tabledata'
style = 'min-width: 300px; height: 58px;'>
</td>
</tr>
</table>
</div>
<style>
@keyframes addnode {
from {
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}
</style>
<script>
var array = [];
var number = 1 ;
function insert()
{
var td = document.createElement('td');
td.innerHTML = number;
document.getElementById('tablerow').prepend(td);
td.style = 'min-width: 80px; height: 80px;
border: 4px solid green;
text-align: center;background: green;
border-radius: 50%;animation-name: addnode;
animation-duration: 2s;
animation-direction: all;
transition-property: transform;
transform: translateX(200px);';
array.push(number);
number++;
td.addEventListener('animationend', function() {
});
}
</script>
</body>
</html>
Producción
Después de insertar muchos Nodes
Publicación traducida automáticamente
Artículo escrito por yagyeshbagaya y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA