将选择添加到html表

Question

我有一些JSON数据，我正在使用JavaScript从这些数据填充HTML表。我要实现的目标是在该列中放置一个名为 Action 的新列，并将按钮命名为 action drop 。该按钮将是一个下拉按钮。

所以基本上我想用一个下拉按钮创建一个HTML表。

我已经使用静态数据成功创建了它

$(window).load(function(){
//save the selector so you don't have to do the lookup everytime
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
    //get row ID
    var id = $(this).closest("tr").children().first().html();
    //move dropdown menu
    $(this).after($dropdown);
    //update links
   
    //show dropdown
   
});
});

<!DOCTYPE html>
<html>
<head>
<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">

</head>
<body>
  <table id="myTable" class="table table-hover table-bordered table-striped">
    <thead>
      <tr>
 
        <th>Billdate</th>
        <th>Total1</th>
        <th>Jayanagar</th>
        <th>Malleshwaram</th>
        <th>Kolar</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        
        <td>Total</td>
        <td>450273</td>
        <td>2855952</td>
        <td>516093</td>
        <td>678228</td>
        
        <td class="dropdown"><a class="btn btn-default actionButton"
          data-toggle="dropdown" href="#"> Action drop </a></td>
      </tr>
     
    </tbody>
  </table>
  <ul id="contextMenu" class="dropdown-menu" role="menu">
    <li><a  href="test.html" class="link1">go to next</a></li>
    <li><a href="test1.html" class="Link2">next</a></li>
  </ul>
 
</body>
</html>

但是我想在动态HTML表中执行此操作，在该表中我无法将下拉类添加到<a>标签

到目前为止，我所做的是

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");
                    let a = document.createElement("a");
     	            th.innerHTML = "Bill___Date";
                     th.classList.add("text-center");
     	            headerRow.appendChild(th);
     	            let grandTotal = 0;
     	            let outletWiseTotal = {};
     	            th = document.createElement("th");
     	            th.innerHTML = "Total1";
                    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];
     	            });
     	            th = document.createElement("th");
     	                th.innerHTML = "Action";                     
                        th.classList.add("text-center");
     	                headerRow.appendChild(th);
     	            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";
                         th.classList.add("text-right");   
                         th.classList.add("dropdown");
                       a.classList.add("btn-default");
                       a.classList.add("actionButton");
     	                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);
            
     	            
     	      

     	            tbl.innerHTML = "";
     	            tbl.appendChild(table);
     	            table.classList.add("table");
     	            table.classList.add("table-striped");
     	            table.classList.add("table-bordered");
     	        }
                
                                

                
                 let formatedData = formatData(data);
                 renderTable(formatedData);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="tbl"></div>

</body>
</html>

我正在尝试使Action下拉按钮，但不知道我在哪里落后？

Answer 1

您的代码中似乎有问题

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

锚标签<a>应该位于<th>元素内，但是代码将“ Action Drop”设置为HTML内部。您可以像这样更改代码。

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

th.appendChild(a);
headerRow.appendChild(th);

请注意所做的更改，现在为<a>设置了“动作放置”，并且<th>作为孩子附加了<a>。希望这能解决问题。

Answer 2

您没有将锚标记作为子元素附加到表头。另外，您可以像在静态内容中一样使用<th>来代替<td>。

th = document.createElement("th"); 
a = document.createElement("a") //
th.innerHTML = "Action drop"; // removed this line
th.classList.add("text-right");
th.classList.add("dropdown"); 
a.classList.add("btn-default");
a.classList.add("actionButton");
a.setAttribute('data-toggle', 'dropdown'); // add this line
a.innerHTML = "Action drop"; // add this line
th.appendChild(a); // add this line
headerRow.appendChild(th);

另外，像在静态页面中所做的一样，在<ul>标签下面的<div>元素中添加id="tbl"：

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

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="#" class="link1">go to next</a></li>
  <li><a href="#" class="Link2">next</a></li>
</ul>

最后，在JavaScript代码内，添加用于处理Action按钮的onClick事件的代码（您已经在静态页面的JQuery中编写了此代码）。

Answer 3

将选择添加到html表

创建带有选择元素的选择元素。

方法createSelect(options)执行此操作。

使用数据中的选项填充选择。

方法createSelect(options)采用一个选项参数，该参数为options. Used jquery $。each to iterate over the array. This select is returned by the method and中的每个项目创建一个选项元素，该元素附加到表行（tr）的末尾。

将结果选择添加到表中

我在html #thead，#tbody中添加了一些ID，可以在jquery中使用这些ID来添加元素。它们被称为钩子。
在tbody中选择了我们的表格行（tr元素），将结果选择添加到其中。

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"
  }
];

//Creates an empty select and iterates over all options
function createSelect(options) {
  var select = $("<select></select>");
  $.each(options, function(opt) {
    var option = $("<option></option>");
    var item = options[opt]
    option.text(item.amount + " " + item.outlet);
    select.append(option);
  });
  return select;
}

//Start function
$(function() {
  var thead = $("#thead");
  var tbody = $("#tbody");
  var tr = tbody.children(1);
  console.log(tr);
  var td = $("<td></td>");
  var select = createSelect(data)
  td.append(select);
  tr.append(td);
});

td {
  border: 1px solid black;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="tbl">
    <table>
      <thead>
        <tr id="thead">
          <th>Label 1</th>
          <th>Drop down label</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <tr>
          <td>Lorem</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

如何使用JavaScript将下拉按钮放入HTML表？

3 个答案:

将选择添加到html表