2

Estoy tratando de crear select en una lista dinámicamente, tengo los valores en un array.

var ruits = ["Banana", "Orange", "Apple", "Mango"];

function AddItem() {
	var tbody = null;
	var tabla = document.getElementById("tabla");
	var nodes = tabla.childNodes;
	for (var x = 0; x<nodes.length;x++) {
		if (nodes[x].nodeName == 'TBODY') {
			tbody = nodes[x];
			break;
		}
	}
	if (tbody != null) {
		var tr = document.createElement('tr');
		tr.innerHTML = `<td>
                    <select>
                    <option>Seleccionar</option>
                    </select>
                    </td>`;
		tbody.appendChild(tr);
	}
}
<form>
    <table id="tabla">
		<thead>
			<tr>
				<th>Select</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<button type="button" onClick="AddItem();">Agregar item.</button>
</form>

Mi problema es que el select creado dinámicamente tenga los valores del array intenté ponerlo en un foreach pero tampoco me funcionó.

Lo que trato de hacer es algo así:

tr.innerHTML = `<td>
                    <select>
                    ruits.forEach(function(element) {
                          <select>${element}</select>
                    });
                    </select>
                </td>`;

3 respuestas 3

3

Hay una forma más simple de hacer esto:

  1. Obtienes una referencia al tbody de la tabla
  2. Empiezas a concatenar un elemento HTML completo que represente una fila
  3. Le concatenas el select y sus options leyendo los valores del array con un forEach
  4. Cierras cada elemento
  5. Usas insertAdjacentHTML para crear la nueva fila

Este es un código mucho más ligero, ya que no hace toda la lectura de cada elemento de la tabla para determinar el tbody de la misma.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

function AddItem() {

  var theBody = document.getElementById('tabla').getElementsByTagName('tbody')[0];
  var newRow = "<tr><td><select>";
  var theOptions = "";
  fruits.forEach(function(fruit) {
    theOptions += `<option value="${fruit}">${fruit}</option>`;
  });
  newRow += theOptions;
  newRow += "</select></td></tr>";

  theBody.insertAdjacentHTML('beforeend', newRow);


}
<form>
  <table id="tabla">
    <thead>
      <tr>
        <th>Select</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <button type="button" onClick="AddItem();">Agregar item.</button>
</form>

2

Prueba esto:

options = '<td>
                <select>';

ruits.forEach(function(item,index) {
                     options += '<option>' + item + '</option>';
                });

options += '</select>
            </td>';

tr.innerHTML = options;
1
  • Muchas Gracias, tu respuesta fue sencillo, me solució un problemon. Commented el 3 ago. 2018 a las 4:10
1
<form>
    <table id="tabla">
        <thead>
            <tr>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button type="button" onClick="AddItem();">Agregar item.</button>
</form>

<script>
    var fruits = ["Banana", "Orange", "Apple", "Mango"];

    function AddItem() {
        var tbody = null;
        var tabla = document.getElementById("tabla");
        var nodes = tabla.childNodes;

        for (var x = 0; x < nodes.length; x++) {
            if (nodes[x].nodeName == 'TBODY') {
                tbody = nodes[x];
                break;
            }
        }

        if (tbody != null) {
            var tr = document.createElement('tr');            
            var opt = "";
            fruits.forEach(function (fruit) {
                opt = opt + '<option>' + fruit + '</option> ';                
            });
            tr.innerHTML = "<td><select>" + opt + "</select></td>";            
            tbody.appendChild(tr);
        }
    }
</script>

Espero te sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.