0

Desarrollo una aplicación web Asp Mvc, en una de las vistas tengo una tabla con la siguiente estructura:

    <table id="grupoActividades" class="ctrlTable table table-striped table-bordered table-hover" cellspacing="0">
    <thead class="ColorHeaderTable">
    <tr>
        <th style="width: 80%">
            @Html.DisplayNameFor(model => model.GrupoActividadBaseViewModels.FirstOrDefault().Descripcion)
        </th>
        <th style="width: 20%">
            Acciones
        </th>
    </tr>
    </thead>
    <tfoot class="ColorHeaderTable">
    <tr>
        <th style="width: 100%">
            @Html.DisplayNameFor(model => model.GrupoActividadBaseViewModels.FirstOrDefault().Descripcion)
        </th>
        <th style="width: 20%">
            Acciones
        </th>
    </tr>
    </tfoot>

    <tbody class="celda">
        @foreach (var item in Model.GrupoActividadBaseViewModels)
        {
            <tr>
                <td style="width: 100%">
                    @Html.DisplayFor(model => item.Descripcion)
                </td>
                <td class="celda" style="width: 20%">
                    <a style='color: #004881' href='/actividadbase/index/@item.GrupoActividadBaseId' id='[email protected]' title='Administrar Actividades Base'>
                        <span class='fa fa-list-ol fa-lg'> </span>
                    </a>
                    <b style='color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>

                    <a data-modal='' data-toggle='modal' data-target='#myModal' style='color: #004881' href='/grupoactividadbase/edit/@item.GrupoActividadBaseId' id='[email protected]' title='Editar información de la Etapa Base'>
                        <span class='fa fa-pencil fa-lg'> </span>
                    </a>
                </td>
            </tr>
        }

    </tbody>
</table>

Dentro de la columna Acciones tengo algunos links para realizar ciertas acciones, quiero que al hacer clic sobre el link id='detail- obtener el texto que pertenece a la columna Descripcion de ese mismo row para mostrarlo en un label.

2 respuestas 2

1

Este es un ejemplo con el uso de JS Nativo sin uso de Jquery. Se puede simplificar el código si asi lo queires. Saludos y éxito.

//Buscamos todos los span que tiene la clase editar.
var a = document.querySelectorAll(".editar");
for(var b in a){ //Como nos devuelve un array iteramos
  var c = a[b];
  if(typeof c == "object"){ //Solo buscamos los objetos
     c.onclick = function (){ //Asignamos un evento onclick
       var td = this.offsetParent; //Localizamos el TD
       var tr = td.parentElement;  //LLegamos hasta el TR
       var columna2 = tr.children[1]; // Buscamos la Columna NOMBRE
       alert("Quieres editar al Usuario: "+columna2.textContent);
     }
  }
}

var d = document.querySelectorAll(".eliminar");
for(var e in d){
  var f = d[e];
  if(typeof f == "object"){
     f.onclick = function (){
       var td = this.offsetParent;
       var tr = td.parentElement;
       var columna1 = tr.children[0]; // Buscamos la Columna #
       alert("Quieres eliminar al ID: "+columna1.textContent);
     }
  }
}
    
table{
  width: 100%;
}
table thead tr{
background: grey;
  color: white;
}
.editar{
background: blue;
  color: white;
  margin: 2px;
  padding: 2px;
}

.eliminar{
background: red;
  color: white;
  margin: 2px;
  padding: 2px;
}

.editar:hover, .eliminar:hover{
cursor: pointer;
} 
<table>
  <thead>
    <tr><th>#</th><th>Nombre</th><th>Acciones</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Juanito Pérez</td><td><span class="editar">editar</span><span class="eliminar">eliminar</span></td></tr>
<tr><td>2</td><td>Juanito Ramiez</td><td><span class="editar">editar</span><span class="eliminar">eliminar</span></td></tr>
    <tr><td>3</td><td>Juanito Carrasco</td><td><span class="editar">editar</span><span class="eliminar">eliminar</span></td></tr>
    <tr><td>4</td><td>Juanito Méndez</td><td><span class="editar">editar</span><span class="eliminar">eliminar</span></td></tr>
  </tbody>
</table>

0

La solucion que encontre es esta:

    <script type="text/javascript" language="javascript">
$(document).ready(function () {

    $('a[id^=detail-]').click(function (e) {

        e.preventDefault();
        var id = parseInt($(this).attr('id').substring(7));

        var descripcion = $(this).closest('tr').find('td:eq(1)').text();

        $('#grupoDescripcion').text(descripcion);
    });
});
</script>

si alguien tiene alguna otra opción estaré gustoso de probar sus respuestas.

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.