使用jquery为多项选择创建表格 - Create table form with jquery for multiple selections

Create table form with jquery for multiple selections

本文关键字：选择创建表格 jquery 使用 | 更新日期: 2023-09-27

我有一个输出数据的循环：

 foreach ($userItems_get as $item => $value) {
            if ($value['prefab'] == 'wearable') {
            echo $value['name'] . "</br>";
            echo "<img src='"{$value['image_inventory']}.png'" width='"90'" height='"60'">" . "</br>";
            if (!isset($value['item_rarity'])) {
                $rarity = "common";
            } else {
                $rarity = $value['item_rarity'];
            }
            echo $rarity . "</br>";
            foreach ($userItemsLoad as $key => $values) {
                if ($item == $values['defindex']) {
                    echo $values['id'] . "</br></br>";
                    break;
                }
            }
            }

        }

我希望它显示如下：http://puu.sh/l7gyH/afe812c4f3.jpg

我有这个html:

<div class="item-container">
    <div id="item-box">
              <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
              <div id="rarity">
                    rare
              </div>
          </div>

无论用户选择了哪个项目，我都想获得它的值['id']，用户可能会同时选择多个项目。

我可以创建一个普通的检查点类型的输入表，但用户可能有1000个项目，所以它需要像图片中那样。

有没有一种简单的方法可以做到这一点？感谢

<div class="item-container">
    <div class="item-box" data-id="1234">
        <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
        <div id="rarity">
            rare
        </div>
    </div>
</div>

<script>
    var selectedItems = [];
    $('.item-box').on('click', function(e){
        $(this).toggleClass('selected');
        var selectedItems = []
        $('.item-box.selected').each(function(i,o){
            selectedItems.push($(this).data('id'))
        })
    });
</script>

我个人认为我会考虑使用AngularJS(https://angularjs.org/)对于这样的事情，它会让你的生活轻松很多。