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 - 这是在这里返回的匿名对象吗？

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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