Как поместить раскрывающуюся кнопку в HTML-таблицу с помощью JavaScript?

У меня есть данные JSON, из которых я заполняю таблицу HTML с помощью JavaScript. Я пытаюсь создать новый столбец с именем Действие и кнопку с именем падение действия в этом столбце. эта кнопка будет кнопкой раскрывающегося списка.

Итак, в основном я хочу создать 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.info(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>

Я пытаюсь сделать так, чтобы действие выпадало, но не знаю, где у меня отстает?

javascript jquery html css

30.11.2018 11:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 927

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Похоже, в вашем коде проблема

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> в качестве дочернего. Надеюсь, это решит проблему.

yupp, вы правы, но основная проблема заключается в том, как я могу объединить оба кода, чтобы получить раскрывающийся список .. первый из статических данных находится в j-запросе

— 30.11.2018 12:17

Если я правильно понимаю, вы хотите использовать метод click (), написанный на JQuery.

— 30.11.2018 12:21

Если есть другой способ добавить раскрывающийся список в свою HTML-таблицу, вы можете сказать мне

— 30.11.2018 12:25

Если вам требуется отдельный элемент контекстного меню для каждой строки, вы можете создать метод для щелчка раскрывающегося списка и передать элемент методу. Это можно было сделать при создании элемента в javascript.

— 30.11.2018 12:29

бывший. contextMenuElement.onclick = contextMenuClickHandler (contextMenuElement);

— 30.11.2018 12:29

нет, контекстное меню будет одинаковым для всех раскрывающихся кнопок .. но в моем втором фрагменте не работает то, что есть сообщение в ответе

— 30.11.2018 12:31

Если требуется повторно использовать только метод jQuery, вы можете использовать что-то вроде этого. function clickHandler (anchorElement) {// вы кодируете} и в своем javascript установите a.onclick = clickHandler.

— 30.11.2018 12:33

30.11.2018 12:09

Ответ принят как подходящий

Вы не добавляете тег привязки в качестве дочернего элемента к заголовку таблицы. Кроме того, вместо <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 добавьте код для обработки события onClick кнопки действия (вы уже написали это в JQuery на своей статической странице).

можете ли вы отредактировать приведенный выше код и предоставить любую скрипку или фрагмент, пожалуйста

— 30.11.2018 12:32

Скрипка для справки - jsfiddle.net/xkt9501m Код работает нормально, как вам нужно.

— 30.11.2018 12:34

30.11.2018 12:26

Добавление выбора в таблицу html

Создал элемент выбора с элементами выбора.

Это делает метод createSelect(options).

Заполните выбор параметрами из ваших данных.

Метод createSelect(options) принимает параметр option, который создает элемент option для каждого элемента в options. Used jquery $ .eachto iterate over the array. This select is returned by the method andappend`ed до конца строки таблицы (tr).

Добавьте полученный выбор в свою таблицу

Я добавил несколько идентификаторов в свои html #thead, #tbody, которые я могу использовать в jquery для добавления элементов. Они называются крючками. Выделил строку нашей таблицы (элемент 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.info(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>

30.11.2018 12:53