Html Table, Get text from one cell by clicking on another

Question

Html Table, Get text from one cell by clicking on another

Navigation

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

0

I develop an Asp Mvc web application, in one of the views I have a table with the following structure:

    <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>

Within the Actions column I have some links to perform certain actions, I want you to click on the link id = 'detail - to get the text that belongs to the column Description of that same row to show it in a label.

javascript jquery asp.net-mvc

asked by jose luis garcia 30.05.2016 в 17:28

source

2 answers

Nest objects related tables Django API REST Framework UPDATE oracle in java

score 1 · Answer 1

This is an example with the use of JS Native without use of Jquery. You can simplify the code if you like it. Greetings and success.

//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>

score 0 · Answer 2

The solution I found is this:

    <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>

If someone has any other option I will be happy to try your answers.