¿Cómo hacer clic en la columna de filas secundarias?

Question

Tengo una tabla HTML en la que hay filas secundarias, quiero hacer clic en la columna de esas filas secundarias para realizar una acción particular.

Tengo filas principales y cuando hago clic en esas filas, se muestran las filas secundarias, en las que hay una columna col2, en la que cuando hago clic debe realizar alguna acción para cada columna de filas secundarias.

Quiero que se pueda hacer clic en col2 de la fila secundaria para mostrar más información usando JavaScript y HTML. No lo sé, pero al hacer clic en la función (onclick('col2')) ¿algo así puede ser útil o no?

var $container = $("#container");
var $row = $("#container table tbody tr");

// Loop through items in JSON data..
var $button = $("<button>" + 'abc' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th></tr>"));

// Button click handler..
$button.on("click", function() {
  for (var i = 0; i < 2; i++) {

    // Replace row HTML..
    //parent row
    var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td>' + "" + '</td></tr>');

    table.append(row);

    for (var j = 0; j < 2; j++) {
      //child row
      var row = $('<tr style="display: none"><td>' + "" + '</td>' + '<td>' + 'data' + '</td></tr>');
      table.append(row);
    }
  }

  $("#table").html(table);
  $('.parent_row').click(function() {

    $(this).nextUntil(".parent_row").toggle();
  })
  // Show table if it's not already visible..


});

table {
  margin-top: 20px;
  border: 1px solid silver;
  width: 500px;
}

th {
  text-align: left;
}

button {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="table">
  </div>

</div>

javascript html

0

Gaurav Baghel 30 oct. 2019 a las 15:00

Answer 1

var $container = $("#container");
var $row = $("#container table tbody tr");

// Loop through items in JSON data..
var $button = $("<button>" + 'abc' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th></tr>"));

// Button click handler..
$button.on("click", function() {
  for (var i = 0; i < 2; i++) {

    // Replace row HTML..
    //parent row
    var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td>' + "" + '</td></tr>');

    table.append(row);

    for (var j = 0; j < 2; j++) {
      //child row
      var row = $('<tr style="display: none"><td>' + "" + '</td></tr>');
        $('<td>data</td>')
          .on('click', function() { alert('some action') })
          .appendTo(row);
      table.append(row);
    }
  }

  $("#table").html(table);
  $('.parent_row').click(function() {

    $(this).nextUntil(".parent_row").toggle();
  })
  // Show table if it's not already visible..


});

table {
  margin-top: 20px;
  border: 1px solid silver;
  width: 500px;
}

th {
  text-align: left;
}

button {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="table">
  </div>

</div>

0

Mischa 30 oct. 2019 a las 12:21

Answer 2

Puede dar un nombre de clase específico a cada <td> en col2 cuando los esté creando, y luego usar un evento onclick regular basado en ese nombre de clase.

Así que:

var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td class="col2">' + "" + '</td></tr>');

Y entonces:

$(".col2").on("click", function() {
    //whatever you want to do here
});

0

Anis R. 30 oct. 2019 a las 12:18

Answer 3

Para captar clics en cualquier columna de una tabla, simplemente agregue un escucha de clics a todas las celdas de esa columna:

const column2cells = document.querySelectorAll('#table tr>*:nth-child(2)');

for (const cell of column2cells) {
  cell.addEventListener('click', function(event) {
    console.log(`You clicked cell [${cell.cellIndex}, ${cell.parentElement.rowIndex}] with content "${cell.textContent}"`);
  })
}

<table id="table">
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
</table>

Como nota para la salida de registro: Recuerde que cellIndex y rowIndex comienzan en 0, no en 1.

2

connexo 30 oct. 2019 a las 12:18

¿Cómo hacer clic en la columna de filas secundarias?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript