如何在 mvc 列表中找到一行并将其用于 jquery

Question

我在 mvc 中有以下列表：

@foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.MiscProductName)
            </td>
            <td class="lblAmount">
                @Html.DisplayFor(modelItem => item.Amount)
            </td>
            <td class="lblCount">
                @Html.DisplayFor(modelItem => item.Count)
            </td>
            <td class="entAmount">
                @Html.EditorFor(modelItem => item.EnteredAmount)
            </td>
            <td class="entCount">
                @Html.EditorFor(modelItem => item.EnteredCount)
            </td>
            <td></td>

        </tr>
    }

其中前 3 列（产品名称、数量、计数）用于显示，接下来的 2 列为输入类型。

现在我的要求是，当在 EnteredAmount" 和 "EnteredAmount" 中输入输入时，在 "EnteredAmount" 的更改或模糊事件中，我需要使用 "Amount" 和 "Count" 并根据输入在最后一列旁边显示图像。

例如：数量 : 50 数量：2 输入数量：20 输入计数：3 现在我们必须显示一些错误图像，因为值（EnteredAmount 和 EnteredCount）分别与 Amount 和 Count 不匹配。

如果它匹配，那么一些正确的符号。

有什么帮助吗？提前致谢

Answer 1

这是一个简单的fiddle。丑陋但它显示了你需要什么。使用最接近而不是 parent。值解析你应该能够用这个例子自己做。

$(document).ready(function(){
  $(".entAmount").change(function(){
    var myText = $(this).closest('tr').find(".lblAmount").text();                     
    if(myText = $(this))
      console.log("It matches!");
  });
});

JSFIDDLE

Answer 2

试试这个Fiddle

这里是JS代码：

$(document).ready(function(){
  $(".entAmount > input").keyup(function(){
    var myText = $(this).val();                     
    var toCheckText = $.trim($(this).closest('tr').find('td.lblAmount').text());
    var otherVal = $(this).closest('tr').find("td.entCount").find("input").val();
    var otherText =  $.trim($(this).closest('tr').find('td.lblCount').text());  
      if(parseInt(myText).toFixed(0) === parseInt(toCheckText).toFixed(0) && parseInt(otherVal).toFixed(0) === parseInt(otherText).toFixed(0)) {
          //show image
          console.log("Matched!!");
      } else {
          //show error
          console.log("Not Matched!!");
      }

  });

  $(".entCount > input").keyup(function(){
    var myText = $(this).val();                     
    var toCheckText = $.trim($(this).closest('tr').find('td.lblCount').text());
    var otherVal = $(this).closest('tr').find("td.entAmount").find("input").val();
    var otherText =  $.trim($(this).closest('tr').find('td.lblAmount').text()); 
      if(parseInt(myText).toFixed(0) === parseInt(toCheckText).toFixed(0) && parseInt(otherVal).toFixed(0) === parseInt(otherText).toFixed(0)) {
          //show image
          console.log("Matched!!");
      } else {
          //show error
          console.log("Not Matched!!");
      }

  });
});

Answer 3

http://jsfiddle.net/xayn93vs/5/

var precision = 0.00005,
    areEqual = function (a, b) {
        return Math.abs(parseFloat(a) - parseFloat(b)) < precision;
    },
    checkEquality = function () {
      var $tr = $(this.parentElement.parentElement),
          sameAmount = areEqual($('.lblAmount', $tr).text(), $('.entAmount input', $tr).val()),
          sameCount = areEqual($('.lblCount', $tr).text(), $('.entCount input', $tr).val());

        $('td:last-of-type', $tr).
            removeClass('match nomatch').
            addClass(sameAmount && sameCount? 'match': 'nomatch');                                                                   
    };

$(".entAmount input, .entCount input").change(checkEquality).keyup(checkEquality);

从我的fiddle可以看出，✔和✘标记是通过CSS使用伪元素添加的。

如何在 mvc 列表中找到一行并将其用于 jquery

how to find a row in mvc list and use that for jquery

asp.net-mvc

jquery