自定义封装弹出框表格代码

好的，以下是一个基于Bootstrap的自定义封装弹出框表格代码，可以用于展示数据或者进行数据选择等操作：

HTML代码：

<!-- 弹出框模态框 -->
<div class="modal fade" id="tableModal" tabindex="-1" role="dialog" aria-labelledby="tableModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tableModalLabel">选择数据</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table id="dataTable" class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>列1</th>
              <th>列2</th>
              <th>列3</th>
            </tr>
          </thead>
          <tbody>
            <!-- 数据行会通过JS动态生成 -->
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="selectBtn">选择</button>
      </div>
    </div>
  </div>
</div>

JS代码：

// 默认选中的数据行索引
var selectedRowIndex = -1;

// 打开弹出框表格
function openTableModal(data, selectedIndex) {
  // 清空表格
  $("#dataTable tbody").empty();
  // 生成表格数据行
  for (var i = 0; i < data.length; i++) {
    var row = $("<tr></tr>");
    for (var j = 0; j < data[i].length; j++) {
      var cell = $("<td></td>").text(data[i][j]);
      row.append(cell);
    }
    $("#dataTable tbody").append(row);
  }
  // 设置默认选中行，并高亮显示
  if (selectedIndex >= 0 && selectedIndex < data.length) {
    selectedRowIndex = selectedIndex;
    $("#dataTable tbody tr").eq(selectedRowIndex).addClass("table-primary");
  }
  // 显示弹出框
  $("#tableModal").modal("show");
}

// 选择数据行
function selectTableRow(rowIndex) {
  // 取消之前选中的行的高亮显示
  $("#dataTable tbody tr").eq(selectedRowIndex).removeClass("table-primary");
  // 设置当前选中的行，并高亮显示
  selectedRowIndex = rowIndex;
  $("#dataTable tbody tr").eq(selectedRowIndex).addClass("table-primary");
}

// 获取选中的数据行
function getSelectedTableRow() {
  var rowData = [];
  if (selectedRowIndex >= 0) {
    var row = $("#dataTable tbody tr").eq(selectedRowIndex);
    row.find("td").each(function() {
      rowData.push($(this).text());
    });
  }
  return rowData;
}

// 绑定选择按钮点击事件
$("#selectBtn").click(function() {
  var rowData = getSelectedTableRow();
  if (rowData.length > 0) {
    // TODO: 处理选中数据行的逻辑
    console.log(rowData);
  }
  // 关闭弹出框
  $("#tableModal").modal("hide");
});

使用示例：

// 打开弹出框表格，data为二维数组形式的表格数据，selectedIndex为默认选中的行索引
openTableModal([
  ["数据1-1", "数据1-2", "数据1-3"],
  ["数据2-1", "数据2-2", "数据2-3"],
  ["数据3-1", "数据3-2", "数据3-3"],
], 1);

注意，以上代码仅供参考，具体实现应根据自己的需求进行调整和优化。