Dom 复杂遍历 Table 布局

Question

我有一个具有复杂 table 结构的网页。完整代码就在这里 --> (index.php)

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>

  <?php
    // this turns the json object into an array
    $json_string = file_get_contents("info.json");
    $json = json_decode($json_string, true);
  ?>

  <div id="scroll_box">
    <table border="1" cellpadding="10" id="container">
      <tr>
        <td>
          <table class="organizer">

            <?php foreach($json as $key => $value): ?>

              <!-- this is what needs to be repeated -->
              <tr><td class="index"> <?php echo $key ?> </td></tr>
                <thead class="sticky" align="center"><tr><th> <?php echo $value["name"] ?></th></tr></thead>
                  <tbody>
                    <tr>
                      <td>
                        <table class="spell_container">

                        <?php
                          foreach ($value["items"] as $key => $value) {
                            echo '<tr><td><table class="table-bordered spell_shorthand">'.
                                  '<tr><td>Name</td><td class="name">'.$value["name"].'</td></tr>'.
                                  '<tr><td>Type</td><td class="type">'.$value["type"].'</td></tr>'.
                                '</table>'.
                              '</td>'.
                              '<td class="description">'.$value["description"].'</td>'.
                              '<td><div class="btn-group"><button class="learn">Learn</button></div></td>'.
                            '</tr>';
                          }
                        ?>    

                        </table>
                      </td>
                    </tr>
                  </tbody>

            <?php endforeach; ?>
          </table>
        </td>
      </tr>
    </table>
  </div>



  <script type="text/javascript">

    $(".learn").on('click', function(){

      var the_name = $(this).closest("tr").find("table.spell_shorthand").find("td.name").text();
      var the_type = $(this).closest("tr").find("table.spell_shorthand").find("td.type").text();
      var the_description = $(this).closest("tr").find("td.description").text();
      var the_index = $(this).closest("table.organizer").find("td.index").text();

      console.log(the_name);
      console.log(the_type);
      console.log(the_description);
      console.log(the_index);


    });
  </script>



  </body>
</html>

并且正在使用的 JSON 数据如下所示 --> (info.json)

[
    {
        "name": "level0",
        "items": [
            {
                "name": "item1",
                "type": "type1",
                "description": "this is item 1"
            },
            {
                "name": "item2",
                "type": "type2",
                "description": "this is item 2"
            },
            {
                "name": "item2",
                "type": "type2",
                "description": "this is item 3"
            }
        ]
    },
    {
        "name": "Level1",
        "items": [
            {
                "name": "item4",
                "type": "type4",
                "description": "this is item 4"
            },
            {
                "name": "item5",
                "type": "type5",
                "description": "this is item 5"
            }
        ]
    },
    {
        "name": "Level2",
        "items": [
            {
                "name": "item6",
                "type": "type6",
                "description": "this is item 6"
            }
        ]
    }
]

现在。我在 js 脚本中的所有 console.log 语句都完美地工作，除了处理 "the_index" 的语句......无论出于何种原因，它都是 return 索引的所有实例（0 , 1, 2) 实际上它应该只是 returning header 的索引，即被单击的按钮的 parent。

我鼓励你拿着这两个文件，亲眼看看我在说什么。

任何关于为什么单击第一个索引 (0) 下的按钮会 return (0 1 2) 的见解将不胜感激，谢谢。

Answer 1

尝试运行在循环中对表创建索引，如下所示：

<?php
  $num_row = 0;
  foreach ($value["items"] as $key => $value) {
    echo '<tr id="row_'.$num_row.'"><td><table class="table-bordered spell_shorthand">'.
    '<tr><td>Name</td><td class="name">'.$value["name"].'</td></tr>'.
    '<tr><td>Type</td><td class="type">'.$value["type"].'</td></tr>'.
    '</table>'.
    '</td>'.
    '<td class="description">'.$value["description"].'</td>'.
    '<td><div class="btn-group"><button class="learn" data-row-id="#row_'.$num_row.'">Learn</button></div></td>'.
    '</tr>';
    $num_row = $num_row + 1;
  }
?>

您可以使用 jQuery 将您的点击事件修改为如下所示。这会大大简化事情。

$(".learn").on('click', function(){
  var row_selector = $(this).data('row-id');
  var the_name = $(row_selector + ' .name').text();
  var the_type = $(row_selector + ' .type').text();
  var the_description = $(row_selector + ' .description').text();
  var the_index = $(row_selector + ' .index').text();
});

Dom 复杂遍历 Table 布局

Dom Traversal Complex Table Layout

javascript

php

jquery

json

tree-traversal