Question

我的客户需要一个显示详细信息或编辑...等的弹出窗口，但他还需要将这些按钮（详细信息或编辑）显示在表（外部表）的顶部，而不是每一行，因此我需要获取选定行的ID，然后将其传递给按钮并打开弹出窗口

简而言之，我需要选择一行，然后单击一个按钮，最后显示弹出窗口

我的代码就是这样。

表格：

<table class="table table-hover table-striped" id="tblId">
<tr>
    <th>
        <label>supplier id</label>
    </th>
    <th>
        @Html.ActionLink(" supplier name ", "Index", new { sortOrder = ViewBag.NameSortParm }, new { @class = "icon-arrow-up" })
    </th>

</tr>

@foreach (var item in Model)
{
    <tr>
        <td>

            @Html.DisplayFor(modelItem => item.SuppNO)
        </td>
        <td>

            @Html.DisplayFor(modelItem => item.SuppName)
        </td>
    </tr>
}

按钮：

<a href="javascript:void(0);" class="anchorDetail btn btn-primary icon-list" id="btndetails" type="text"> Details </a>

弹出窗口：

 
        var TeamDetailPostBackURL = "/M_Supplier/Details";
        $(function () {
            $(".anchorDetail").click(function () {
                debugger;
                var $buttonClicked = $(this);
                var id = $buttonClicked.attr('data-id');
                var options = { "backdrop": "static", keyboard: true };
                //var returnValue;
                $.ajax({
                    type: "GET",
                    url: TeamDetailPostBackURL,
                    contentType: "application/json; charset=utf-8",
                    data: { "id": id },
                    datatype: "json",
                    success: function (data) {
                        debugger;
                        $('#myModalContent').html(data);
                        $('#myModal').modal(options);
                        $('#myModal').modal('show');

                    },
                    error: function () {
                        alert("Dynamic content load failed.");
                    }
                });
            });

            $("#closbtn").click(function () {
                $('#myModal').modal('hide');
            });
        });

这是我尝试获取行ID并突出显示选定的行的方法，它工作正常，但我不知道如何传递ID

    //get id
    $(document).on('click', '#tblId tr', function getid() {
        var tableData = $(this).children("td").map(function () {
            return $(this).text();
        }).get();

        //alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]));
        alert("Your data is: " + $.trim(tableData[0]));
        //return tableData;
    });
    //end

    //hover clicked row
    $("#tblId tr").click(function () {
        var clicked = $(this).data('clicked');
        $(this).data('clicked', !clicked);
        if (clicked) {
            $(this).children().css('backgroundColor', '#fff');
        }
        else {
            $(this).children().css('backgroundColor', '#ffdc87');
        }
    });

    $("#tblId tr").hover(function () {
        $(this).children().css('hover', '#ffdc87');
    }, function () {
        if (!$(this).data('clicked')) {
            $(this).children().css('hover', '#fff');
        }
    });
    //end

Answer 1

这是一个仅使用jquery和一些自定义模式的示例：

说明：

我声明了一个全局变量来设置按钮可以触发的行。
我对每个表行使用委托事件，以设置变量值。
它还使用具有2个不同div的简单模式，第一个显示数据，第二个显示可编辑记录的表格。
选择目标后，按钮将触发要使用的特定模式div，无论何时关闭模式，都将设置目标变量长度以选择新行。
每个按钮都有一个循环，以与行单元格相同的顺序填充字段。

let target;
$('#tableFood tbody>tr').on('click', (e) => {
  target = e.target.closest('tr');
  $(target).css("background-color","#3b8bf5");
  //console.log(target)
})
$('#btnGetRowInfo').on('click', (e) => {
  if ($(target).length > 0) {
    $('#showInfo').empty();
    $('#idNumber').text($(target).find('td:eq(0)').text());
    $(target).children('td').each((i, e) => {
      $('#showInfo').append(`<p>${e.textContent}<p><br>`)
    })
    $('#modalExample,#showInfo').css("display", "block");
  } else {
    alert('Please select a Row !!!')
  }
});
$('#btnCancel,.close').on('click', (e) => {
  $('#modalExample,#showInfo,#showEdit').css("display", "none");
  $(target).css("background-color","#fff");
  target = '';
});
$('#btnGetRowEdit').on('click', (e) => {
  if ($(target).length > 0) {
    $('#showEdit').children('input').val('');
    $('#idNumber').text($(target).find('td:eq(0)').text());
    $(target).children('td').each((i, e) => {
      $('#showEdit').children('input')[i].value = e.textContent;
    })
    $('#modalExample,#showEdit').css("display", "block");
  } else {
    alert('Please select a Row !!!')
  }
})

/**
	* modal css
	**/
.modal {
  display: none;
  /* Hidden */
  position: fixed;
  /*mantener posicion: fixed, enable scroll using absolute*/
  z-index: 1;
  /* index top */
  padding-top: 100px;
  /* inicio del content modal */
  left: -100;
  top: 0;
  width: 600px;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #4a7ac9;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #4a7ac9;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btnGetRowInfo" value="Show Info">
<input type="button" id="btnGetRowEdit" value="Edit data">

<table border="1" id="tableFood">
  <thead>
    <th>id</th>
    <th>name</th>
    <th>price</th>
    <th>available</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>apple</td>
      <td>2</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>banana</td>
      <td>1</td>
      <td>250</td>
    </tr>
    <tr>
      <td>3</td>
      <td>fish</td>
      <td>5</td>
      <td>36</td>
    </tr>
    <tr>
      <td>4</td>
      <td>egg</td>
      <td>1</td>
      <td>64</td>
    </tr>
  </tbody>
</table>

<!---modal-->
<div id="modalExample" class="modal">
  <!--Content-->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Record Number #<span id="idNumber"></span></h2>
    </div>
    <div class="modal-body" id="formModal" data-opcion="default">
      <div align="center" id="showInfo" style="display:none">

      </div>
      <div align="center" id="showEdit" style="display:none">
        <label for="txtId">Id: </label><input type="text" name="txtId" id="txtId" readonly>
        <br>
        <label for="txtName">Name:</label><input type="text" name="txtName" id="txtName">
        <br>
        <label for="txtPrice">Price:</label><input type="number" name="txtPrice" id="txtPrice">
        <br>
        <label for="txtAvQty">Available qty:</label><input type="number" name="txtAvQty" id="txtAvQty">
      </div>
    </div>
    <div class="modal-footer">
      <br><br><br>
      <button id="btnOk" name="btnOk" type="button" style="float:left;margin-left:35%;">Ok</button>
      <button id="btnCancel" name="btnCancel" type="button" style="float:right;margin-right:35%;">Cancel</button>
      <br><br><br>
    </div>
  </div>
</div>

希望它会有所帮助，对不起英语不好，这也是一篇很长的帖子

获取并传递行ID

1 个答案: