按钮在表格中单击时读取输入文本值

Question

我有一个显示某个标题的表格，我想在输入文本框中输入两个值。每个输入都有记录主键+ MA或.. + MP的id。此外，我有一个确认和取消按钮。

现在当用户在文本中选择一个输入值并且他/她点击确认按钮，jQuery / JavaScript选择记录ID +输入文本值和警报结果时，我想要什么......

非常感谢

Razor / HTML

<table class="table">
<tr>

    <th>
        @Html.DisplayNameFor(model => model.Multipart_Title)
    </th>

    <th></th>
</tr>

@foreach (var item in Model)
{
 <tr>           
     <td>
        @Html.DisplayFor(modelItem => item.Multipart_Title)
     </td>

      <td>
        @Html.Label("Marks Available")
        @Html.TextBox("Input_Marks_Available", null, new { id = @item.MultiPartID + "_MA", @class = "MultiPart_Marks_Available" })
        @Html.TextBox("Input_Passing_Marks", null, new { id = @item.MultiPartID + "_MP", @class = "MultiPart_Passing_Marks" })
      </td>

      <td>
        <input type="button" value="Confirm" name="button" class="k-button k-button-icontext multiPart_confirm" />
        <input type="button" value="Cancel" name="button" class="k-button k-button-icontext multipart_cancel" />
      </td>

   </tr>
}
</table>

的jQuery

   $(document).ready(function () {

       $(".multiPart_confirm").click(function () {           
                ??????????
       });
   });

Answer 1

您需要将按钮更改为：

<td>
    <input type="button" value="Confirm" name="button" data-id="@item.MultiPartID" class="k-button k-button-icontext multiPart_confirm" />
    <input type="button" value="Cancel" name="button" data-id="@item.MultiPartID" class="k-button k-button-icontext multipart_cancel" />
  </td>

能够在按钮点击时获得记录ID;

你的剧本应该是：

$(".multiPart_confirm").click(function () {    
    var recordId = $(this).data("id");
    var marksAvailable = $("#" + recordId + "_MA").val();
    var passingMarks = $("#" + recordId + "MP").val();      
    //do whatever you want
});

Answer 2

将您的HTML更改为

<td>
  <input type="button" value="Confirm" name="button" data-itemid="@item.MultiPartID" class='k-button k-button-icontext multiPart_confirm' />
  <input type="button" value="Cancel" name="button" data-itemid="@item.MultiPartID" class="k-button k-button-icontext multipart_cancel" />
</td>

然后将代码修改为

$(".multiPart_confirm").on('click', function(){
  var parent = $(this).parent();
  var itemId = $(this).attr('data-itemid');
  var marksAv = parent.find("#" + itemId + '_MA');
  var marksMp = parent.find("#" + itemId + '_MP');
  // perform required action
  alert("Marks Available: " + marksAv.val() + " Passing Marks: " + marksMp.val());
});

Answer 3

使用像这样的东西

$(document).ready(function () {

       $(".multiPart_confirm").click(function () {           
                $(".table").find('input[typr=text]').each(function(){
                  var value = $(this).val();
                  var txtID = $(this).attr('id');
                   alert(txtID + " = "+ value) 

                })
       });
   });

Answer 4

点击按钮，您可以获得文本框值

var textbox = $(this).closest('tr').find('td:eq(1) input');

现在您可以使用每个功能。

$(textbox).each(function(){
alert($(this).val());
});

请记住，eq是基于0的。你正试图获得第二个td文本框的值。所以这里它是1.