Для моего недавнего проекта мне нужно показать данные в виде таблицы. Когда я нажимаю на любую строку таблицы, все содержимое строки будет показано в дополнительном элементе div. Смотрите код ниже:

<div class="left-side">
    <table id="data">
        <tr>
            <td>cell(1,1)</td>
            <td>cell(1,2)</td>
            <td>cell(1,3)</td>
        </tr>

        <tr>
            <td>cell(2,1)</td>
            <td>cell(2,2)</td>
            <td>cell(2,3)</td>
        </tr>

        <tr>
            <td>cell(3,1)</td>
            <td>cell(3,2)</td>
            <td>cell(3,3)</td>
        </tr>
    </table>
</div>

<div class="right-side">
    <!-- when a row is clicked, then the respective information is shown here-->
    <!-- for example, if i click the first row, then it shows cell(1,1) and cell(1,2) and cell(1,3) and so on-->
</div>

Пожалуйста, предложите любую идею о том, как сделать это, используя jQuery или JavaScript.

0
Sajeeb Ahamed 15 Дек 2015 в 13:29

4 ответа

Лучший ответ
var string = '';
$("#data tr").click(function() {
  
  $(this).find("td").each(function(index) {
    string += $(this).text();
  });
  document.write("<br/>" + string);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-side">
  <table id="data">
    <tr>
      <td>cell(1,1)</td>
      <td>cell(1,2)</td>
      <td>cell(1,3)</td>
    </tr>

    <tr>
      <td>cell(2,1)</td>
      <td>cell(2,2)</td>
      <td>cell(2,3)</td>
    </tr>

    <tr>
      <td>cell(3,1)</td>
      <td>cell(3,2)</td>
      <td>cell(3,3)</td>
    </tr>

  </table>
</div>

<div class="right-side"></div>
2
ozil 15 Дек 2015 в 10:41

Просто добавьте функцию щелчка к вашему примеру:

function showInrightDif(this) 
{
    var divtext=''
    $(this).find('td').each(function() {
       divtext = divtext + $(this).text;
    });
    $('.right-side').text(divtext);
}
0
chaudharyp 15 Дек 2015 в 10:56

Добавьте обработчик события click в свой код jQuery:

<script type="text/javascript">
    $(function() {
        $("#data tr").click(function() { //Click event handler for the table column
            var columnText = $(this).text(); //text from the column clicked.
            $(".right-side").text(columnText); //Populates the .right-side div with the text.
        });
    });
</script>

Совет: Если вы знаете jQuery, то предпочитаете jQuery обычному JavaScript. Это приведет к гораздо более четкому и лаконичному коду.

1
chaudharyp 15 Дек 2015 в 11:04

Добавьте этот код:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $('#data tr').click(function () {
        $('.right-side').text($(this).text());
    });
</script>
0
chaudharyp 15 Дек 2015 в 10:59