Блог

У меня есть таблица внутри моего представления. Я хочу получить текст из строки нажатием кнопки. Пока у меня нет никакого успеха. Наибольший прогресс, которого я добился, — это получение ответов «[object объект]» и «Дополнительно 1». В моей модели есть значение с именем «Extras», я не знаю, откуда взялось ‘1’. Я видел, как другие использовали скрытое поле для получения значения, но по-прежнему безуспешно.

Моя цель — использовать jQuery для получения текста из строки нажатием кнопки. Спасибо за вашу помощь!

Мой взгляд:

 <table&&t;
    <thead&&t;
        <tr&&t;
            <td&&t;Select</td&&t;
            <td&&t;
                @Html.DisplayNameFor(model =&&t; model.Extras)
            </td&&t;
        </tr&&t;
    </thead&&t;
    <tbody&&t;
        @foreach (var item in Model)
        {
            <tr&&t;
                <td&&t;
                    <button class="btn btn-success" id="btnSelect"&&t;
                        @Html.HiddenFor(modelItem =&&t; item.Id)
                        Select
                    </button&&t;
                </td&&t;
                <td id="tdExtras"&&t;
                    @Html.DisplayFor(modelItem =&&t; item.Extras)
                    @Html.HiddenFor(modelItem =&&t; item.Extras);
                </td&&t;
            </tr&&t;
        }
    </tbody&&t;
</table&&t;
  

в моем jQuery я пытался получить значение с помощью .val() и .text(), ориентируясь на «Дополнительные», такие как:

 $('#Extras').val();
  

насколько я понимаю, дополнительно используется идентификатор. В инструментах разработчика Chrome html выглядит следующим образом:

 <button&&t;
    <input id="#" value="the text that I want to select" /&&t;
</button&&t;
  

Я также попытался установить класс и идентификатор в скрытое поле внутри моей кнопки. Все значения есть, но я не могу получить к ним доступ. Пожалуйста, помогите.

Вам нужно использовать class here вместо id , а затем при нажатии кнопки получить ближайший, tr а затем найти входное значение, используя .find() метод jquery.

Демонстрационный код :

 //on click of button
$(document).on("click", ".btn", function() {
  //&et closest tr then find .tdExtras &&t; input 
  console.lo&($(this).closest('tr').find('.tdExtras  input').val());
  //or by class 
 console.lo&("By class -- " $(this).closest('tr').find('.tdExtras  input.extras').val());
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table&&t;
  <thead&&t;
    <tr&&t;
      <td&&t;Select</td&&t;
      <td&&t;
        Abcd
      </td&&t;
    </tr&&t;
  </thead&&t;
  <tbody&&t;


    <tr&&t;
      <td&&t;
        <button class="btn btn-success" id="btnSelect"&&t;  Select </button&&t;
      </td&&t;
      <!--use class instead of id--&&t;
      <td class="tdExtras"&&t;

        <input type="text" class="extras" value="somethin&"&&t;
      </td&&t;
    </tr&&t;
    <tr&&t;
      <td&&t;
        <button class="btn btn-success" id="btnSelect"&&t;   Select</button&&t;
      </td&&t;
      <td class="tdExtras"&&t;
        <input type="text" class="extras" value="somethin&1"&&t;
      </td&&t;
    </tr&&t;

  </tbody&&t;
</table&&t;