JQuery - 按子类的按钮或ID过滤表?

时间:2018-03-13 01:28:38

标签: javascript jquery html filter html-table

这是我在这里提出的第一个问题,所以只要删除它,如果它太具体了,我很抱歉你的时间。我会在下次尝试做得更好:)但我在这里和谷歌找到的一切对我没有帮助,我无法弄清楚,如何正确行事。我认为,仅仅因为我找不到类似的东西,这个问题可以帮助更多人而不仅仅是我:

以下情况:

Example of the given table

这是由PHP构建的普通HTML表。

<tr class="tablerow" data-id='{id}'>
<td class='spalte1' id=del{id}>
    <input class='delbutton imagebutton'
           type='image' src='src/mülleimer.png' title='ID {id} löschen' data-id={id}
           />
</td>
<td class='interpret' id='interpret{id}' title='Interpret'>{Interpret}</td>
<td class='songtitel' id='songtitel{id}' title='Songtitel'>{Songtitel}</td>
<td class='status' id='status{id}' title='Flags'>{Statusbar}</td>
<td class='utilbar' id='utilbar_header{id}'>{Utilbar}{audioplayer}
    <div class='eingabe_linkDiv' id='eingabe_linkDiv{id}' style='display:none'>
        <input type='text' class='eingabe_link' data-id='{id}'/>

    </div>
</td>

花括号包围的所有内容都将逐行替换,并且它与给定的ID相同。

static function getStatusbar($id) {
    $outputFrame = '<div id = "addedFlags">{added}</div><div id = "allFlags">{all}</div>';
    $outputAdded = "";
    $outputAll = "";
    $output = "";
    $active = Main::getDatenbank()->getFlags($id);
    $all = php\Flag::getAll();
    foreach ($all as $i => $flag) {
        if (in_array($flag, $active)) {
            $outputAdded .= $flag->getButtonString($id, "added");
            $outputAll .= $flag->getButtonString($id, "all", true);
        } else {
            $outputAll .= $flag->getButtonString($id, "all", true);
            $outputAdded .= $flag->getButtonString($id, "added", true);
        }
    }
    $output = str_replace("{added}", $outputAdded, $outputFrame);
    $output = str_replace("{all}", $outputAll, $output);

    return $output;
}
在Flag-class中的

//:$ addedall是一个字符串'added'(对过滤器)或'all'

function getButtonString($id, $addedall, $hidden = false) {
    $output = "<input "
            . "class='imagebutton statusbutton ".$this->type." ".$this->type."button$id' "
            . $hidden ? "style='display:none' ":""
            . "type='image' src='src/$this->filename.png' "
            . "title='$this->title' "
            . "data-id=$id data-type='$this->type' data-a='$addedall'/>";
    return $output;
}

现在我想通过添加到Table-Header的标志来过滤表的行。 Header有一个状态栏部分,带有图像按钮,就像每一行一样。因此,如果在过滤器中选择了一个按钮,我只想显示添加了相同按钮的行(=“make show”,未添加。每行都有每个按钮,但大多数都是隐藏的)。在这个例子中,所有“德国”歌曲,由“男人”演唱,演奏“吉他”和“爱”。

最好的方法是什么?添加到过滤器的标志存储在数据库中,我可以轻松地抓取它们,但循环通过二维数组不想工作。

function filter() {
$("#Table_Songlist tr").show();
$.get('db/getAllFlags.php', function (output) {
    var allflags = JSON.parse(output);
    var filter = JSON.parse(allflags[0]);//filtersettings are stored in db with id 0
    for (var id in allflags) {
        var flagarray = JSON.parse(allflags[id]);
        for (var index in flagarray) {
            if (!$.inArray(flagarray[index], filter)) {
                $("tr").filter(function () {
                    return $(this).attr('data-id') == id;
                }).hide();
            }
        }
    }
});

public function getAllFlags() {
    try {
        $a = array();
        $rs = $this->pdo->query("SELECT * FROM songhasflag ORDER BY id");
        foreach ($rs as $row) {
            $a[$row['id']][] = $row['flag'];
        }
        return $a;
    } catch (\Exception $ex) {
        die($ex->getMessage());
    }
}

和.php

$a = \repertoire\Main::getDatenbank()->getAllFlags();
$b = array();
foreach($a as $id => $flagarray) {
    $b[$id] = json_encode($flagarray);
}
echo json_encode($b);

或者用Dom-Traversal尝试它是否更好,以便我得到所有包含标题按钮的tr-children?我甚至无法想象,这段代码应该是什么样的.. 有没有人知道,我怎么能让行消失,与标题中的过滤器不匹配?

0 个答案:

没有答案