How can I traverse an html table as if it were a coordinate table?

Question

How can I traverse an html table as if it were a coordinate table?

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

My problem is this, I'm trying to insert some values into a database (dynamic) html with editable fields, I already have the function that inserts, but my problem is how to relate the value that I place in the table with what I want through a jquery.

This is how I build my table:

 if (isset($dataRubroTerm)) {

// el script declarado en esta parte del controlador justo antes de la tabla hace que funcionen los eventos jquery
            $html = "

<script>

$('.prueba').on('focusin','tr',function(){
    $( '.prueba td ' ).focusout(function( event ) {
      var precio= $(this).text();

      console.log(+precio);return false;

    });
});

</script>

<table class='table table-striped table-bordered table-hover prueba'> 
                    <tr>
                       <td> <b>Rubro seleccionado - " . $dataRubro->descripcion /*aca cambia dependiendo de el rubro que se seleccione*/. "</b>  </td>  
                       <td> <b>PRECIO MAR</b>  </td>  
                       <td> <b>PRECIO ANA</b>  </td>  
                       <td> <b>PRECIO DE CAJA</b>  </td>  
                       <td> <b>PRECIO EXT</b>  </td>  
                       <td> <b>MARCAS</b>  </td>  
                    </tr>  ";


            foreach ($dataRubroTerm AS $fila[0]) { // aca se autogenera la tabla.  


                $PrecioMar = Monitoreo::buscarPrecios($idMonitor, 1, $fila[0]->id_rub_term); //Esto hace la busqueda por bdd a ver si hay precios guardados previamente , al igual con la marca.
                $PrecioAna = Monitoreo::buscarPrecios($idMonitor, 2, $fila[0]->id_rub_term);
                $PrecioDCaja = Monitoreo::buscarPrecios($idMonitor, 3, $fila[0]->id_rub_term);
                $PrecioExt = Monitoreo::buscarPrecios($idMonitor, 4, $fila[0]->id_rub_term);
                $marcas = Monitoreo::buscarPrecios($idMonitor, 5, $fila[0]->id_rub_term);
                $html .= "<tr>
                        <td> " . $fila[0]->fkPresentacion->descripcion . " </td>";
                $html .= "<td class='numeric prueba' contenteditable='true'> " . ($PrecioMar == "" ? '0.00' : $PrecioMar) /*se coloca un condicional if (?) para usar la busqueda por base de datos y ver si hay o no hay algo guardado previamente*/ . "</td>";
                $html .= "<td class='numeric prueba'  contenteditable='true'>" . ($PrecioAna == "" ? '0.00' : $PrecioAna) . " </td>";
                $html .= "<td class='numeric prueba' contenteditable='true'>" . ($PrecioDCaja == "" ? '0.00' : $PrecioDCaja) . "</td>";
                $html .= "<td class='numeric prueba'  contenteditable='true'>" . ($PrecioExt == "" ? '0.00' : $PrecioExt) . "</td>";
                $html .="<td>" . ($marcas == "" ? 'Sin marca' : $marcas) . "</td></tr>";


            }
        }

jquery html php algoritmos

asked by JuanF_Romero 07.11.2016 в 22:04

source

2 answers

How to block inputs with js, according to comparisons of dates made in php? Only block the first inputs of the first record How to send data with ajax so that you do not have to reload the page for the changes to come out?

score 1 · Answer 1

I answer your question about how to navigate a table, I understand that you want to do it with JavaScript:

function foreach(root, selector, callback) {
   if (typeof selector == 'string') {
      var all = root.querySelectorAll(selector);
      for (var each = 0; each < all.length; each++) {
         callback(all[each]);
      }
   } else {
      for (var each = 0; each < selector.length; each++) {
         foreach(root, selector[each], callback);
      }
   }
}

function walk(table) {
   var table = document.getElementById(table);
   var data = [];
   if (table) {
      foreach(table, 'tr:not(:first-child)', function(row) {
         var record = [];
         foreach(row, 'td', function(cell) {
            record.push(cell.innerText);
         });
         data.push(record);
      });
   }
   /* data contiene los datos de la tabla */
   console.log(JSON.stringify(data, undefined, 3));
   return data;
}

<table id="table">
   <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
   </tr>
   <tr>
      <td>1,1</td>
      <td>1,2</td>
      <td>1,3</td>
   </tr>
   <tr>
      <td>2,1</td>
      <td>2,2</td>
      <td>2,3</td>
   </tr>
   <tr>
      <td>2,1</td>
      <td>2,2</td>
      <td>2,3</td>
   </tr>
</table>

<button onclick="walk('table')">Recorrer</button>

I hope it helps you.

score 1 · Answer 2

It can probably be easier:

function getcoordValue(){
  var coords = document.getElementById('coordsInput').value.split(',');
  var x = parseInt(coords[0]) - 1;
  var y = parseInt(coords[1]) - 1;
  alert(document.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerText)
}

<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <table>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
        <tr>
            <td>7</td><td>8</td><td>9</td>
        </tr>
    </table>
    <input id="coordsInput" placeholder="coords"/>
    <button onclick="getcoordValue()">get value</button>
</body>
</html>