Как выдавать таблицу с dropdownlist?

Я хочу сделать страницу с чем-то больше, чем HTML и CSS. У меня есть это:

y esto es mas o menos lo que tengo

Я искал из-за Интернета и я не нашел ничего, что было бы хорошо объяснено или что подавало бы меня действительно. То, что я хочу сделать, что, выбрав выбор меня

(Ограниченная) таблица

Icon Item Selling at Buying at Stock
Beastly Bonnet 1.33 refined 1 refined 33/100
Big Elfin Deal 2 keys + 4.22 refined 1 key + 15.11 refined 33/100

1
задан 18.05.2016, 23:10
3 ответа

Здесь у тебя есть пример основываясь на твоем коде и используя jQuery. Поскольку ты можешь видеть в каждый выбор в select, я распределяю ему как стоимость категорию (Scout, Soldier...).

В каждую линию я распределяю ему class с вышеупомянутой категорией. В частности я распределил его в линию Scout и в другую Soldier.

В событии change select возвращается отборная стоимость и они являются линиями, класс которых совпадает со стоимостью, и скрывают от себя оставшуюся часть.

Если он выбирает All, они являются всеми:

$(function(){
	var $tabla = $('#tabla');
	
	$('#selectCategory').change(function(){
		var value = $(this).val();
		if (value){
			$('tbody tr.' + value, $tabla).show();
			$('tbody tr:not(.' + value + ')', $tabla).hide();
		}
		else{
			// Se ha seleccionado All
			$('tbody tr', $tabla).show();
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>Class:</span> 
<select id="selectCategory">
            <option value="">ALL</option>
            <option value="Scout">Scout</option>
            <option value="Soldier">Soldier</option>
            <option value="Pyro">Pyro</option>
            <option value="Demoman">Demoman</option>
            <option value="Heavy">Heavy</option>
            <option value="Engineer">Engineer</option>
            <option value="Medic">Medic</option>
            <option value="Sniper">Sniper</option>
            <option value="Spy">Spy</option>
        </select>
</div>

<table id="tabla" style=" width: 1000px; margin: 0 auto;">
        <thead>
            <tr>
                <th>Icon</th>
                <th>Item</th>
                <th>Selling at</th>
                <th>Buying at</th>
                <th>Stock</th>
            </tr>
        </thead>

        <tbody>
            <tr class="Scout">
                <td><img src="#"/></td>
                <td>Beastly Bonnet</td>
                <td>1.33 refined</td>
                <td>1 refined</td>
                <td>33/100</td>
            </tr>

            <tr class="Soldier">
              <td><img src="#"/></td>
              <td>Big Elfin Deal</td>
              <td>2 keys + 4.22 refined</td>
              <td>1 key + 15.11 refined</td>
              <td>33/100</td>
            </tr>
        </tbody>
    </table>
1
ответ дан 24.11.2019, 14:20
  • 1
    Sos учитель!! Супер понятный код, cortito добро, аккуратное добро. Большое спасибо! – Lucas. D 19.05.2016, 01:42
  • 2
    ¿ есть способ это делать mú ltiple выборы? – Jorge Campos 01.10.2018, 21:13

Следующий cГіdigo позволяет выдавать результаты на основании одного <select>, может давать тебе основание.

$("#searchInput").change(function () {
if(this.value != "all")
  {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
    jo.show();
    return;
}
//hide all the rows
jo.hide();

//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains('" + data[d] + "')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();
  }
}).focus(function () {
this.value = "";
$(this).css({
    "color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="searchInput">
<option value="all">all</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="mouse">mouse</option>
</select>
<br/>
<table>
<thead>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
</thead>
<tbody id="fbody">
    <tr>
        <td>cat</td>
        <td>one</td>
    </tr>
    <tr>
        <td>dog</td>
        <td>two</td>
    </tr>
    <tr>
        <td>cat</td>
        <td>three</td>
    </tr>
    <tr>
        <td>mouse</td>
        <td>four</td>
    </tr>
    <tr>
        <td>mouse</td>
        <td>five</td>
    </tr>
    <tr>
        <td>dog</td>
        <td>six</td>
    </tr>
</tbody>
</table>
1
ответ дан 24.11.2019, 14:20
  • 1
    Формат ответа - правильный. Но в вопросе они просят решать это с drop down list, известным в качестве <select> в HTML. T и # 250; ты поставляешь implementaci и # 243; n используя поле текста. Если такой вопрос как эта нуждается в том, чтобы быть проясненным, рекомендуемое состоит в том, чтобы не отвечать и quiz и # 225; s помещать флаг для Вашего atenci и # 243; n. Существуют другие вопросы в сайте, что quiz и # 225; s смоги обслуживать:). Пользователи как t и # 250; что читают комментарии и улучшаются делают эту работу м и # 225; s удовлетворительная: D. –  18.05.2016, 23:04
  • 2
    Большое спасибо! Уникум problemita - что, если они закрепляются, когда ты выбираешь выбор и потом volves, чтобы выбирать " all" он не показывает все линии, а последние выбранные. – Lucas. D 18.05.2016, 23:17

Привет только ты должен изменять линию:

if(this.value != "") // Solo modifique esta linea

Разместил все cГіdigo, что раньше уже у тебя был. Привет.

    $("#searchInput").change(function () {
    if(this.value != "") // Solo modifique esta linea
      {
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $("#fbody").find("tr");
   
    if (this.value == "" || this.value=="all") {
        
        jo.show();
        return;
    }

    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    //show the rows that match.
    .show();
      }
    }).focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
    }).css({
    "color": "#C0C0C0"
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="searchInput">
<option value="all">all</option>
    <option value="cat">cat</option>
    <option value="dog">dog</option>
    <option value="mouse">mouse</option>
    </select>
    <br/>
    <table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody id="fbody">
        <tr>
            <td>cat</td>
            <td>one</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>two</td>
        </tr>
        <tr>
            <td>cat</td>
            <td>three</td>
        </tr>
        <tr>
            <td>mouse</td>
            <td>four</td>
        </tr>
        <tr>
            <td>mouse</td>
            <td>five</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>six</td>
        </tr>
    </tbody>
    </table>
0
ответ дан 24.11.2019, 14:20

Теги

Похожие вопросы