行加上jquery不工作

时间:2017-11-30 13:12:41

标签: javascript jquery

我使用表格,当我按下按钮时,结果会添加到该表格中。这些行有一个需要选择的按钮,但它不起作用

我想点击按钮并提醒他们说什么。

链接到小提琴: https://jsfiddle.net/KukApep3/v62e4quc/6/



var receitas = {
  Lulas: ["Arroz de Lulas"],
  Vaca: ["Bitoque", "Estufado de Vaca"]
};

function get_receita(alimento) {
  var pesquisa = [];
  for (var key in receitas) {
    if (receitas.hasOwnProperty(key)) {
      if (key == alimento) {
        pesquisa.push(receitas[key]);
      };
    };
  };

  return pesquisa[0];
};

$("#pesquisar_receita").click(function() {
  var alimento = document.forms["form_refeicao"]["alimento"].value;
  $("table").find("tr:gt(0)").remove();
  //$("#resultados").css("display", "block");

  var pesquisa = get_receita(alimento);
  for (var i = 0; i < pesquisa.length; i++) {
    //$("#resultado_"+i).text(pesquisa[i]);
    $("table tr:last").after("<tr><td>" + pesquisa[i] + "</td><td><button>Escolher</button></td></tr>");
  };

  $("#resultados").css("display", "block");
});

$("table button").click(function() {
  $(this).closest('tr').find('td').each(function(colIndex, c) {
    refeicao = c.textContent;
  });
  alert(refeicao);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_refeicao" onSubmit="return false">
  <p>
    <label>Prato Principal:</label>
    <select id="alimento">
      <option value="Vaca">Bife: Vaca</option>
      <option value="Frango">Bife: Frango</option>
      <option value="Porco">Bife: Porco</option>
      <option value="Atum">Peixe: Atum</option>
      <option value="Espadarte">Peixe: Espadarte</option>
      <option value="Lulas">Peixe: Lulas</option>
      <option value="Pescada">Peixe: Pescada</option>
    </select>
    <button id="pesquisar_receita">Pesquisar</button>
  </p>
  <div id="resultados" style="display: none">
    <table>
      <tr>
        <th colspan="2">Resultados:</th>
      </tr>
    </table>
  </div>
</form>
&#13;
&#13;
&#13;

0 个答案:

没有答案