javascript - 单击 HTML 表格内的下 zipper 接时如何动态调用页面？-6ren

javascript - 单击 HTML 表格内的下 zipper 接时如何动态调用页面？

转载作者：行者123 更新时间：2023-11-29 20:47:57

我有一个 HTML 表格，其中包含指向多个列的下 zipper 接。

我已经实现了，如果有人点击链接，它就会转发到那个链接。

我想要实现的是，就像我有不同的 HTML 表格一样，当特定的选定下拉列发生点击事件时，我想在同一页面上调用它。

这是我的代码

<div id="tbl"></div>

    <ul id="contextMenu" class="dropdown-menu" role="menu">
      <li><a href="test1.html" class="link1">report1</a></li>
      <li><a href="" class="Link2">report2</a></li>
    </ul>

    $(window).load(function() {
        $dropdown = $("#contextMenu");
        $(".actionButton").click(function() {
          //get row ID

          //move dropdown menu
          $(this).after($dropdown);
          //update links

          $(this).dropdown();
        });
      });

    data= [
           {
             "amount": 291589,
             "billdate": "2018-08-01",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 58337,
             "billdate": "2018-08-01",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 65970,
             "billdate": "2018-08-01",
             "outlet": "KOLAR"
           },
           {
             "amount": 296125,
             "billdate": "2018-08-02",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 56545,
             "billdate": "2018-08-02",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 72213,
             "billdate": "2018-08-02",
             "outlet": "KOLAR"
           },
           {
             "amount": 346605,
             "billdate": "2018-08-03",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 62459,
             "billdate": "2018-08-03",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 65248,
             "billdate": "2018-08-03",
             "outlet": "KOLAR"
           },
           {
             "amount": 518212,
             "billdate": "2018-08-04",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 104801,
             "billdate": "2018-08-04",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 138151,
             "billdate": "2018-08-04",
             "outlet": "KOLAR"
           },
           {
             "amount": 628358,
             "billdate": "2018-08-05",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 115223,
             "billdate": "2018-08-05",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 134107,
             "billdate": "2018-08-05",
             "outlet": "KOLAR"
           },
           {
             "amount": 177866,
             "billdate": "2018-08-06",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 66095,
             "billdate": "2018-08-06",
             "outlet": "KOLAR"
           },
           {
             "amount": 284069,
             "billdate": "2018-08-07",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 58789,
             "billdate": "2018-08-07",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 67886,
             "billdate": "2018-08-07",
             "outlet": "KOLAR"
           },
           {
             "amount": 313128,
             "billdate": "2018-08-08",
             "outlet": "JAYANAGAR"
           },
           {
             "amount": 59939,
             "billdate": "2018-08-08",
             "outlet": "MALLESHWARAM"
           },
           {
             "amount": 68558,
             "billdate": "2018-08-08",
             "outlet": "KOLAR"
           }
         ]

         let formatData = function (data) {

                        let billdates = [];
                        let outlets = [];
                        data.forEach(element => {
                            if (billdates.indexOf(element.billdate) == -1) {
                                billdates.push(element.billdate);
                            }
                            if (outlets.indexOf(element.outlet) == -1) {
                                outlets.push(element.outlet);
                            }
                        });
                        return {
                            data: data,
                            billdates: billdates,
                            outlets: outlets,

                        };
                    };



                    let renderTable = function (data) {
                        billdates = data.billdates;
                        outlets = data.outlets;
                        data = data.data;
                        let tbl = document.getElementById("tbl");
                        let table = document.createElement("table");
                        let thead = document.createElement("thead");
                        let headerRow = document.createElement("tr");
                        let th = document.createElement("th");
                        th.innerHTML = "Bill___Date";
                         th.classList.add("text-center");
                        headerRow.appendChild(th);
                        let grandTotal = 0;
                        let outletWiseTotal = {};
                        th = document.createElement("th");
                        th.innerHTML = "Total";
                        th.classList.add("text-center");
                        headerRow.appendChild(th);

                        outlets.forEach(element => {
                            th = document.createElement("th");
                            th.innerHTML = element;
                            th.classList.add("text-center");
                            headerRow.appendChild(th);
                            outletWiseTotal[element] = 0;
                            data.forEach(el => {
                                if (el.outlet == element) {
                                    outletWiseTotal[element] += parseInt(el.amount);
                                }
                            });
                            grandTotal += outletWiseTotal[element];
                        });


                        thead.appendChild(headerRow);
                        headerRow = document.createElement("tr");
                        th = document.createElement("th");
                        th.innerHTML = "Total";
                       th.classList.add("text-center");

                        headerRow.appendChild(th);

                        outlets.forEach(element => {
                            th = document.createElement("th");
                            th.innerHTML = outletWiseTotal[element];
                             th.classList.add("text-right");   //ol totals
                            headerRow.appendChild(th);
                        });
                      /*  th = document.createElement("th");
                      a = document.createElement("a");
                      // th.innerHTML = "Action drop"; // removed
                      th.classList.add("text-center");
                      th.classList.add("dropdown");
                      a.classList.add("btn-default");
                      a.classList.add("actionButton");


                      // added
                      a.setAttribute("data-toggle", "dropdown");
                      a.innerHTML = "Action drop";
                      th.appendChild(a); // added

                      headerRow.appendChild(th); */
                        th = document.createElement("th");
                        th.innerHTML = grandTotal;
                          th.classList.add("text-right");  // grand total
                  /*  console.log(grandTotal);*/
                       // headerRow.appendChild(th);
                    headerRow.insertBefore(th , headerRow.children[1] );
                        thead.appendChild(headerRow);
                        table.appendChild(thead);

                        let tbody = document.createElement("tbody");


                        billdates.forEach(element => {
                            let row = document.createElement("tr");  
                            td = document.createElement("td");
                            td.innerHTML = element;
                            row.appendChild(td);
                            let total = 0;
                            outlets.forEach(outlet => {
                                let el = 0;
                                data.forEach(d => {
                                    if (d.billdate == element && d.outlet == outlet) {
                                        total += parseInt(d.amount);
                                        el = d.amount;
                                    }
                                });
                               /*  td = document.createElement("td");
                                td.innerHTML = el; */



                               td = document.createElement("td");
                              a = document.createElement("a");
                              // th.innerHTML = "Action drop"; // removed
                              td.classList.add("text-right");
                              td.classList.add("dropdown");
                              a.classList.add("btn-default");
                              a.classList.add("actionButton");


                              // added
                              a.setAttribute("data-toggle", "dropdown");
                              a.innerHTML = el;
                              td.appendChild(a); // added

                              row.appendChild(td);



                                 /* td.classList.add("text-right"); //oldata
                                row.appendChild(td); */
                            });
                            /*console.log("row is : " , row.children )*/
                            td = document.createElement("td");
                            td.innerHTML = total;
                             td.classList.add("text-right"); //column total
                           // row.appendChild(td);
                            row.insertBefore(td , row.children[1] );
                            tbody.appendChild(row);

                        });

                        table.appendChild(tbody);

                        tbl.innerHTML = "";
                        tbl.appendChild(table);
                        table.classList.add("table");
                        table.classList.add("table-striped");
                        table.classList.add("table-bordered");
                       table.classList.add("table-hover");
                    }
                     let formatedData = formatData(data);
                     renderTable(formatedData);

在这里，我提供了一个链接('test.html')来检查。

在我的 HTML 表格中，我有三个列，分别命名为 JAYANAGAR、MALLESHWARAM 和 KOLAR。对于这三列，我将下拉菜单命名为 Report1 和 Report2。当用户单击 JAYANAGAR 列的 Report1 下拉列表时，它应该仅显示 Jayanagar 数据。对于所有三列，我的代码中已有链接或新表。我只想在单击列下拉列表并重定向或呈现分配给该链接的表时过滤动态调用。

如果用户点击 jayanagar 列的下拉菜单，那么它应该在同一页面的某些 div 标签中显示 jayanagar 数据
如果用户点击 Maleeshwaram 的下拉菜单，那么它应该在同一个 div 标签中显示 malleshwaram 数据。
我已经根据网点过滤了数据。只想在 java 脚本结束时执行它。
我只想知道用户点击的是哪一栏的下拉菜单。

Fiddle

最佳答案

您已经有了通用功能，您只需要根据点击和完成来过滤数据，我已经过滤了您的数据并绑定(bind)到特定的 div。它现在应该可以工作了。

这部分很重要，需要对数据进行过滤，绑定(bind)到不同的div。

$(".dropdown-menu li a").click(function() {

    if (currentlyClickedPlace !== "" && currentlyClickedPlace !== undefined) {
      var filteredData = data.filter(a => a.outlet === currentlyClickedPlace);
      let formatedData = formatData(filteredData);
      renderTable(formatedData, 'test', '');
    }
  })

var currentlyClickedPlace = "";
$(window).load(function() {
  $dropdown = $("#contextMenu");
  $(".actionButton").click(function() {
    //move dropdown menu
    $(this).after($dropdown);
    //update links
    $(this).dropdown();

    currentlyClickedPlace = $(this).attr("data-place");
  });
  $(".dropdown-menu li a").click(function() {
    if (currentlyClickedPlace !== "" && currentlyClickedPlace !== undefined) {
      var filteredData = data.filter(a => a.outlet === currentlyClickedPlace);
      let formatedData = formatData(filteredData);
      renderTable(formatedData, 'test', '');
    }
  })
});

data = [{
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
]

let formatData = function(data) {

  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};



let renderTable = function(data, divId, filterdata) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById(divId);
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Bill___Date";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let outletWiseTotal = {};
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
      }
    });
    grandTotal += outletWiseTotal[element];
  });


  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");

  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = outletWiseTotal[element];
    th.classList.add("text-right"); //ol totals
    headerRow.appendChild(th);
  });
  /*  th = document.createElement("th");
        	          a = document.createElement("a");
        	          // th.innerHTML = "Action drop"; // removed
        	          th.classList.add("text-center");
        	          th.classList.add("dropdown");
        	          a.classList.add("btn-default");
        	          a.classList.add("actionButton");
        	         

        	          // added
        	          a.setAttribute("data-toggle", "dropdown");
        	          a.innerHTML = "Action drop";
        	          th.appendChild(a); // added

        	          headerRow.appendChild(th); */
  th = document.createElement("th");
  th.innerHTML = grandTotal;
  th.classList.add("text-right"); // grand total
  /*  console.log(grandTotal);*/
  // headerRow.appendChild(th);
  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");

  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);
    let total = 0;
    outlets.forEach(outlet => {
      let el = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          el = d.amount;
        }
      });
      /*  td = document.createElement("td");
       td.innerHTML = el; */



      td = document.createElement("td");
      a = document.createElement("a");
      // th.innerHTML = "Action drop"; // removed
      td.classList.add("text-right");
      td.classList.add("dropdown");
      a.classList.add("btn-default");
      a.classList.add("actionButton");

      a.setAttribute("data-place", outlet);
      // added
      a.setAttribute("data-toggle", "dropdown");
      a.innerHTML = el;
      td.appendChild(a); // added

      row.appendChild(td);



      /* td.classList.add("text-right"); //oldata
        	                    row.appendChild(td); */
    });
    /*console.log("row is : " , row.children )*/
    td = document.createElement("td");
    td.innerHTML = total;
    td.classList.add("text-right"); //column total
    // row.appendChild(td);
    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);

  });

  table.appendChild(tbody);

  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData, 'tbl', '');

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" />

<div id="tbl"></div>
<div id="test"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="#" class="link1">Report1</a></li>
  <li><a href="#" class="Link2">Report2</a></li>
</ul>

编辑:您可以为报告 1 和报告 2 绑定(bind)单独的链接并调用 ajax 函数

var currentlyClickedPlace = "";
$(window).load(function() {
  $dropdown = $("#contextMenu");
  $(".actionButton").click(function() {
    //move dropdown menu
    $(this).after($dropdown);
    //update links
    $(this).dropdown();

    currentlyClickedPlace = $(this).attr("data-place");
  });
  $(".link1").click(function(){
    alert('report 1 is clicked in ' + currentlyClickedPlace);
    //call ajax and bind the data into test div
  });
  $(".Link2").click(function(){
    alert('report 2 is clicked in ' + currentlyClickedPlace);
    //call ajax and bind the data into test div
  });
});

data = [{
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
]

let formatData = function(data) {

  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};



let renderTable = function(data, divId, filterdata) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById(divId);
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Bill___Date";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let outletWiseTotal = {};
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
      }
    });
    grandTotal += outletWiseTotal[element];
  });


  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");

  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = outletWiseTotal[element];
    th.classList.add("text-right"); //ol totals
    headerRow.appendChild(th);
  });
  /*  th = document.createElement("th");
        	          a = document.createElement("a");
        	          // th.innerHTML = "Action drop"; // removed
        	          th.classList.add("text-center");
        	          th.classList.add("dropdown");
        	          a.classList.add("btn-default");
        	          a.classList.add("actionButton");
        	         

        	          // added
        	          a.setAttribute("data-toggle", "dropdown");
        	          a.innerHTML = "Action drop";
        	          th.appendChild(a); // added

        	          headerRow.appendChild(th); */
  th = document.createElement("th");
  th.innerHTML = grandTotal;
  th.classList.add("text-right"); // grand total
  /*  console.log(grandTotal);*/
  // headerRow.appendChild(th);
  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");

  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);
    let total = 0;
    outlets.forEach(outlet => {
      let el = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          el = d.amount;
        }
      });
      /*  td = document.createElement("td");
       td.innerHTML = el; */



      td = document.createElement("td");
      a = document.createElement("a");
      // th.innerHTML = "Action drop"; // removed
      td.classList.add("text-right");
      td.classList.add("dropdown");
      a.classList.add("btn-default");
      a.classList.add("actionButton");

      a.setAttribute("data-place", outlet);
      // added
      a.setAttribute("data-toggle", "dropdown");
      a.innerHTML = el;
      td.appendChild(a); // added

      row.appendChild(td);



      /* td.classList.add("text-right"); //oldata
        	                    row.appendChild(td); */
    });
    /*console.log("row is : " , row.children )*/
    td = document.createElement("td");
    td.innerHTML = total;
    td.classList.add("text-right"); //column total
    // row.appendChild(td);
    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);

  });

  table.appendChild(tbody);

  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData, 'tbl', '');

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" />

<div id="tbl"></div>
<div id="test"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="#" class="link1">Report1</a></li>
  <li><a href="#" class="Link2">Report2</a></li>
</ul>

关于javascript - 单击 HTML 表格内的下 zipper 接时如何动态调用页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53589075/

文章推荐： android - FFmpeg Android 和 FFmpeg Android Java 有什么区别？

文章推荐： java - 这是在这里返回的匿名对象吗？

JavaScript:动态(动态)创建样式元素的优缺点
在 JavaScript 中，我们可以动态创建元素并附加到部分，以便为大量元素应用 CSS 规则。这种方法的优点或缺点是什么？如果它确实提供了与元素上的 javascript 迭代相比的性
flutter - Flutter Dart:错误_ImmutableMap <动态，动态>' is not a subtype of type ' Map
我有这个代码 import "./HTTPMethod.dart"; import '../../DataModel/DataModel.dart'; mixin RouterMixin { HT
mdx - 动态、动态、OLAP 维度
哪些 OLAP 工具支持动态、动态地创建维度或层次结构？例如，层次结构将成员定义为:“前 5 名”、“前 6-10 名”、“其他”... 计算成员是通常的答案，我正在寻找不同的东西。计算器的问题。成
validation - 动态/动态 CakePhp 3 验证和 FormHelper
我正在 CakePHP 中创建一个“表单编辑器”。该界面允许用户选择要应用于字段的验证，例如数字、电子邮件等因此，我需要根据用户输入为模型动态创建验证。为此，我可以使用验证对象:https://b
java - 动态(动态)生成 Web 服务 - 如何？
这是一个场景: 我有一个Web服务，我们将其称为部署在tomcat(轴)上的StockQuoteService。通过此 Web 服务公开了 getStockQuote() 方法。现在，我想构建一个
dart - 未处理的异常 : InternalLinkedHashMap' is not a subtype of type ' 列表<动态>
我正在尝试从服务器获取 JSON 响应并将其输出到控制台。 Future login() async { var response = await http.get( Uri.
json - Flutter dart json未处理的异常: InternalLinkedHashMap' is not a subtype of type '列表<动态>
我从另一个问题中得到了这段代码(感谢 chunhunghan)。我需要创建一个登录屏幕，并尝试根据服务器发回给我的响应来验证用户凭据，但是每次我尝试运行代码时，它都会给我“未处理的异常:Interna
Dart 代码在我的 Flutter 应用程序中表现不同。列表<动态 >' is not a subtype of type ' 列表< map <字符串，动态>>
当我在“Dart”主程序中运行它时，一切正常，并且我得到了一个与会者列表。但是，当我在我的 Flutter 应用程序中调用它时，出现错误: flutter:“List”类型不是“List>”类型的子类
js实现验证码干扰(动态)
本文实例为大家分享了js实现验证码动态干扰的具体代码，供大家参考，具体内容如下效果一效果二代码一 ?
Cloudflare 动态 DNS
目前我正在为我的网站使用 No-Ip，我想使用 cloudflare 来抵御 ddos 和机器人程序。我注意到您需要一个用于 cloudflare 的域。我还搜索了网络，发现了一个叫做 cloud
vba - 动态 IF 语句
有没有办法在 Excel VBA 中构建动态 if 语句？基本上我正在尝试创建一个参数化计算，用户将能够输入不同的变量，即变量 1 “变量 2” “变量 3” 在这种情况下变量 1 是单元格引用
vba - 格式化(动态)
大家好，请查看上面的图片，我有两张 table 。在下面代码的第一个表中，我得到了这种格式。但我想像 Table2 那样格式化，每个合并单元格中的行数是动态的，而且不一样。有没有办法像table
header - 动态 heightForHeaderInSection
如何根据我添加的 View 修改标题部分的高度？heightForHeaderInSection在 viewForHeaderInSection 之前被调用我不知道 View 大小，直到我创建它。最
parsing - 动态 (?) 解析器
是否存在在运行时生成 AST/解析树的解析器？有点像一个库，它会接受一串 EBNF 语法或类似的东西并吐出数据结构？我知道 antlr、jlex 和他们的同类。他们生成可以做到这一点的源代码。 (喜
Django 动态 OR 查询
我在持有汽车制造商的表格上有一个 MultipleChoiceField。我想将我的汽车数据库过滤到已检查的品牌，但这会导致问题。如何动态获取所有 Q(make=...) 语句？我如何开始:['va
PHP 动态 preg_replace
$end = preg_replace($pattern, $replacement, $str); 如何使替换字符串 $replacement 随 $str 中的每次匹配而变化？例如，我想用关联的图
excel - 在VBA中获取表范围(动态)
我正在编写一个 VBA 程序，用于过滤表中的值。我试图使其成为一个适用于您提供的所有表格的通用程序。在我的程序中，我必须设置它正在过滤的表的范围:Set rng = dataSheet.Range("
javascript - 动态/递归结构中的切换按钮
我正在循环一个元素数组，并且我想使用给定的模板递归地显示该元素然后在该模板内使用带有切换功能的按钮来显示/隐藏给定元素的Child的更深级别模板(Child也是一个元素) 这是我的模板
javascript - 使用对象选择要运行的函数(动态)
从客户端(html)发送表单，服务器端通过选择选项之一决定运行哪个函数。 const decideWho = (form) => { const choice = form.choice; c
java - 动态/编程设置具有可绘制背景的按钮的大小
我有一个具有以下属性的按钮: circle_normal.xml(在 res/drawable 中) circle.xml(在 res/drawable 中)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击 HTML 表格内的下 zipper 接时如何动态调用页面？