how the contents of a column in a table are disabled

Question

how the contents of a column in a table are disabled

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have a table, whose rows are added dynamically.

Each column has elements of type select e input text and the last column has a text "Eliminar" , so that when the user hits click on said column, the row is deleted .

How can I disable the "Delete" so that the row is not deleted when clicking?

This is working with jquery .

The column has the form:

<td  class="eliminar">
    Eliminar
</td>

The third column is:

<td  class="eliminar">
    Eliminar
</td>

When this column is clicked, the following is triggered:

$(document).on("click",".eliminar",function()
{
var parent = $(this).parents().get(0);
var fila=$(parent).attr('id');
$(parent).remove();
}

The question points to whether there is any attribute at the column level that can be reset so that the content is disabled and the actions are not executed when clicked.

For example, I have disabled the elements in the previous columns in the following way:

$("#tabla tbody tr").each(function () 
{   
$(this).find("td:eq(0)").find("select").attr('disabled',true);  
$(this).find("td:eq(1)").find("input").attr('disabled',true);
$(this).find("td:eq(2)").attr('disabled',true);
}

In the last line I show how I'm trying to disable the contents of the column, but it does not work.

I told you that I solved the issue by doing the following:

$("#tabla tbody tr").each(function () 
{   
$(this).find("td:eq(0)").find("select").attr('disabled',true);  
$(this).find("td:eq(1)").find("input").attr('disabled',true);
$(this).find("td:eq(2)").removeClass("eliminar");

That way, when you click on that column, because you do not have the class, you do not execute the actions in:

$(document).on("click",".eliminar",function()

jquery

asked by Junco Fuerte 25.11.2016 в 00:20

source

3 answers

PL / SQL: convert varchar to time to get difference later Copy a file with JavaScript

score 1 · Answer 1

with this code it can work, if you click on the first column it is not possible to click there. You simply have to add that class in the item where you do not want the row to be deleted. This class is recommended to be added at the time the table is created or based on another criterion after it has been created.

$("tr td:nth-child(3)").click(function(){
     if (!$(this).hasClass("not-active")){
         alert("El item sera eliminado.");
         // tu codigo para eliminar aqui
    }
});

.not-active {
   cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%">
  <thead>
       <tr>
            <th>nombre</th>
            <th>apellido</th> 
            <th>X</th>
       </tr>
   </thead>
   <tbody>
      <tr> 
          <td>juan</td>
          <td>perez</td>
          <td class="not-active">eliminar</td>
      </tr>
      <tr>
              <td>Jose</td>
              <td>Lopez</td>
              <td>eliminar</td>
      </tr>
      <tr>
              <td>Mary</td>
              <td>Lopez</td>
              <td>eliminar</td>
      </tr>
   </tbody>
</table>

score 1 · Answer 2

If you do not want it to be deleted, maybe you could replace the link with a "#",

    <a href="<?php echo base_url(); ?>/" class="testClick">Home</a>

$(".testClick").click(function () {
        var value = $( this ).attr( "href" ); // Obtener el valor del atributo href
        alert( value ); // mostrar ese valor obtenido
        value = $( this ).attr( "href", "#" ); // asignar nuevo valor a href
        alert( value ); // mostrar nuevo valor
        return false; // evitar el envío
    });

Unless I have not understood correctly, it could be an option.

score 0 · Answer 3

Hide it from the user's view with visibility This will cause it to occupy the space as if it were actually there, useful if some cells should be shown based on requirements.

<td  class="eliminar" style="visibility: hidden;">
Eliminar
</td>

If you want to hide ALL, you better use the class to do it

<style>
.eliminar{
    /*Usa cualquiera de estas, dependiendo de como que se vea tu UI*/
    visibility: hidden;
    display: none;
}
</style>