1

estoy tratando de mandar dos parámetros que necesito a un script de sql, para que me haga una modificación en la base de datos. Lo que tengo es los siguiente:

$(function() {
    $('.tabla :input').on('change', function(){
       var $input = $(this);
       if($input.val() === 'F'){
           $input.removeClass('verde');
          $input.addClass("rojo"); 
          /*$input.classList.remove('verde');*/
          /* $input.style['background'] = 'red';*/
       } else {
           $input.removeClass('rojo');
           $input.addClass("verde");
           /*$input.classList.remove('rojo');*/
           /*$input.style['background'] = 'green';*/
       }
    });
    $("#ejecutar").click(function(){
        var ano = new Date();
        console.log(ano.getFullYear());
        console.log((ano.getMonth()+1));
        $("input[name='dia[]']").each(function(indice, elemento) {
            console.log('El elemento con el índice '+indice+' contiene '+$(elemento).val());
        });
    });
    $("input").on('change', function(){
        var fecha = $("input").attr("name");
        var placa = $("td").attr("name");
        console.log(placa);
        $.post("modificar.php",{centro: $("#input").attr("name")});
    });
});
body {
  font-family: Serif, Arial, Helvetica, "sans-serif";
  background-color: #31aee7;
  color: white;
}
.placa, .dia{
    font-size: 1.2em;
    background-color:#085584ff;
    width: 50px;
    font-weight: bold;
}
input{
    border-radius: 5px;
    border: 0;
    width: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
}
/*input[value="1"]{
    background: green;
}
input[value="F"]{
    background: red;
}*/
.rojo {
    background: red;
    font-weight: bold;
}
.verde {
    background: green;
    font-weight: bold;
}
table, th,td{
  border: 2px solid;
  border-color: white;
  border-radius: 5px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
   </head>
  <body>
   <table class="tabla">
    <tbody>
      <tr>
        <th width="100" class="placa">Placa</th>
        <th width="100" class="dia">1</th>
        <th width="100" class="dia">2</th>           
        <th width="100" class="dia">3</th>
        <th width="100" class="dia">4</th>
        <th width="100" class="dia">5</th>
        <th width="100" class="dia">6</th>
      </tr>
      <tr>
        <td align="center" name="abc123">abc123</td>
        <td><input type="text" class="rojo" value="F"                   name="12/1/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/2/2019"></td>
        <td><input type="text" class="rojo" value="F"                   name="12/3/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/4/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/5/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/6/2019"></td>
       </tr>
       <tr>
       <tr>
        <td align="center" name="def123">def123</td>               <td><input type="text" class="rojo" value="F"                    name="12/1/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/2/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/3/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/4/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/5/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/6/2019"></td>
       </tr>

Al dar click en algún input si me trae el name del td pero el problema es que siempre me toma el mismo y no se como hacer para que cambie por que la idea es que me traiga cada placa dependiendo donde cambie el input.

Trate por medio de PHP concatenar la placa y la fecha en cada input pero no me los une, la verdad ya no se que mas hacer para darle solución a esto, ya que necesito tanto la fecha como la placa para validar que modifique lo que le pido.

Agradezco mucho la ayuda que me puedan dar.

2 respuestas 2

2

De la forma que lo tienes siempre te va a traer la misma fecha y name. Necesitas usar el contexto this asi:

$(function() {
    $('.tabla :input').on('change', function(){
       var $input = $(this);
       if($input.val() === 'F'){
           $input.removeClass('verde');
          $input.addClass("rojo"); 
          /*$input.classList.remove('verde');*/
          /* $input.style['background'] = 'red';*/
       } else {
           $input.removeClass('rojo');
           $input.addClass("verde");
           /*$input.classList.remove('rojo');*/
           /*$input.style['background'] = 'green';*/
       }
    });
    $("#ejecutar").click(function(){
        var ano = new Date();
        console.log(ano.getFullYear());
        console.log((ano.getMonth()+1));
        $("input[name='dia[]']").each(function(indice, elemento) {
            console.log('El elemento con el índice '+indice+' contiene '+$(elemento).val());
        });
    });
    $("input").on('change', function(){
        var fecha = $(this).attr("name");
        var placa = $(this).parents('tr').find('td:first').attr("name");
        console.log(fecha);
        console.log(placa);
        $.post("modificar.php",{centro: $("#input").attr("name")});
    });
});
body {
  font-family: Serif, Arial, Helvetica, "sans-serif";
  background-color: #31aee7;
  color: white;
}
.placa, .dia{
    font-size: 1.2em;
    background-color:#085584ff;
    width: 50px;
    font-weight: bold;
}
input{
    border-radius: 5px;
    border: 0;
    width: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
}
/*input[value="1"]{
    background: green;
}
input[value="F"]{
    background: red;
}*/
.rojo {
    background: red;
    font-weight: bold;
}
.verde {
    background: green;
    font-weight: bold;
}
table, th,td{
  border: 2px solid;
  border-color: white;
  border-radius: 5px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
   </head>
  <body>
   <table class="tabla">
    <tbody>
      <tr>
        <th width="100" class="placa">Placa</th>
        <th width="100" class="dia">1</th>
        <th width="100" class="dia">2</th>           
        <th width="100" class="dia">3</th>
        <th width="100" class="dia">4</th>
        <th width="100" class="dia">5</th>
        <th width="100" class="dia">6</th>
      </tr>
      <tr>
        <td align="center" name="abc123">abc123</td>
        <td><input type="text" class="rojo" value="F"                   name="12/1/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/2/2019"></td>
        <td><input type="text" class="rojo" value="F"                   name="12/3/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/4/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/5/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/6/2019"></td>
       </tr>
       <tr>
       <tr>
        <td align="center" name="def123">def123</td>               <td><input type="text" class="rojo" value="F"                    name="12/1/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/2/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/3/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/4/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/5/2019"></td>
        <td><input type="text" class="rojo" value="F"                    name="12/6/2019"></td>
       </tr>

1
  • 1
    Gracias @alanfcm por tu pronta respuesta, la verdad aun estoy aprendiendo, me sirvio de maravilla. el 31 dic. 2019 a las 16:17
1

No te entiendo muy bien lo que necesitas hacer, sin embargo puedo ver que tienes un gran problema al recuperar los atributos nombre en esta sección:

var fecha = $("input").attr("name");
var placa = $("td").attr("name");

lo que haces con:

$("input")

es buscar el elemento de tipo input y siempre recuperara el primero que encuentre, lo mismo sucede con :

$("td")

Solo busca el primer td.

Comentarte que no estas haciendo las cosas para nada bien, los id y name se utilizan para identificar a los elementos no para guardar los valores que queremos recuperar de ellos, para no botar todo lo que hiciste, Intercambia:

var fecha = $("input").attr("name");
var placa = $("td").attr("name");

por:

var fecha = $(this).attr("name");
var placa = $('td:first', $(this).parent().parent()).attr("name");

Con eso recuperas tanto el nombre del primer td de la fila y el nombre del input que modificaste.

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.