0

Alguien que me pueda ayudar, quiero agregarle un id a cada uno de los cuadros de mi tabla en este caso cada row, tengo mi tabla de la siguiente manera: introducir la descripción de la imagen aquí

Y necesito agregarle un id a cada cuadrito que se encuentra con un guion -. El id sera respecto a su posición, en este caso en Presentación seria id = 1-2, en Presentación (4ta posición) seria id = 1,3 y así sucesivamente y cuando sea otro renglón cambiaría a id= 2-2 o id= 2-3 y así respectivamente.

Utilizo codeigniter, bootstrap-tables, JSON, javascrit.

Para crear la tabla utilizo el siguiente código:

$('#ejemplo').bootstrapTable({
      url:'<?= base_url(); ?>index.php/ejemplo/presentacion/datos',
      columns: [
        {field: 'mate',filter:{type:"input"}},
        {field: 'idMate',filter:{type:"input"}},
        {field: 'pres',filter:{type:"input"}}
      ],

      pagination: true,
      showFooter: true,
      showHeader: true,
      search: true,
      showExport:true,
      filter: true,
      method: 'post',
      showRefresh:true,

    });

El encabezado lo agrego directamente en htlm, al crear mi encabezado la Presentación se pone de manera dinamica dependiendo cuantas se traiga de mi base de datos.

<table id="materiales">
   <thead>
     <?php  
       $pres = explode(",",$presentacion);
         echo '<th>Materiales</th>';
         echo '<th></th>';
            for ($i=0; $i <count($pres) ; $i++) { 
              echo '<th>'.$pres[$i].'</th>';
            }                          
  ?>
</thead>

Alguien que me pueda ayudar a realizar eso en javascript.

5
  • Eso sin duda se puede lograr en el momento en que estas creando las filas y tus columnas. Puedes editar tu pregunta para añadir el código que estas usando para crear la tabla, ya sea dinámico o estático? el 27 jul. 2017 a las 21:40
  • listo @Kenny, espero me puedas ayudar!!!
    – Soldier
    el 27 jul. 2017 a las 21:44
  • Las celdas con - tienen alguna clase?? Y me imagino que la tabla ya está hecha, es decir la escribiste en el html, javascript no la crea??
    – ben
    el 27 jul. 2017 a las 21:45
  • @BenjamínGuzmán agregué el código html de la tabla.
    – Soldier
    el 27 jul. 2017 a las 21:57
  • Encontre la documentación de bootstrap-tables (nunca habia escuchado de esta libreria) y al parecer hay una propiedad de la tabla que se llama "uniqueId" que asigna Id unicos a cada fila (no creo que a cada celda). Puedes verla aqui: bootstrap-table.wenzhixin.net.cn/documentation Tambien encontre que hay otra forma de crear la tabla, que en vez de usar JavaScript (como ahora lo haces) puedes hacerlo directamente en el html, y en ese caso creo que talves si se podria un id unico para cada celda, este es el link bootstrap-table.wenzhixin.net.cn/getting-started/#usage el 27 jul. 2017 a las 22:45

1 respuesta 1

0

Pues se podría hacer con algo así:

var filas = document.getElementsByTagName("tr"), celdas;
	for (var i = 0; i < filas.length; i++){
		filas[i].firstElementChild.id = i+"-0";  //Sólo suponiendo que Materiales sea el primer td, de lo contrario
		celdas = filas[i].children;
		for (var j = 0; j < celdas.length; j++){
			let celda_actual = celdas[j];
			if(celda_actual.textContent == "-")//Sólo si llegasen a haber más celdas con contenido que no sea -
				celda_actual.id = i+"-"+j;
		}
	}
<table>
	<tr>
		<td>-</td>
		<td>hola</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>hola</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>hola</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>hola</td>
		<td>-</td>
		<td>-</td>
	</tr>
</table>

3
  • Sí, de acuerdo, pero hasta abajo comenta: "Alguien que me pueda ayudar a realizar eso en javascript.", por lo que entendí hacerlo en javascript, y no en la librería bootstrap-tables.js de javascript, por ello, @Soldier ¿Podrías aclarar si lo quieres en javascript puro o en la librería?
    – ben
    el 27 jul. 2017 a las 22:58
  • seria en javascript y bootstrap-tables utilizando los dos, ya que para mandar los datos (columnas le mando el json y el bootstrap-tables), ya solo seria que a cada td se le agregara un id respectivamente.
    – Soldier
    el 28 jul. 2017 a las 3:21
  • Gracias @Benjamin Guzman, me funcionó perfecto, solo lo adapte un poco para que funcionara con Bootstrap-tables. :)
    – Soldier
    el 28 jul. 2017 a las 14:32

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.