Мммм.

Как установить кнопки CSS в ячейки таблицы?

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

Есть ли способ вставить кнопки в ячейки таблицы?

  
 
Link1 goes here
 
Link2
goes
here
 
Link3
goes
here
 
Link4
goes
here
 
 
 
 
 
Link1 goes here
 
Link2
goes
here
 
Link3
goes
here
 
Link4
goes
here
 
Link5
goes
here
 
  

.buttons < overflow:auto; text-align: center; font-size: 1.0em; font-weight: bold; line-height: 200%; >.buttons a < display: inline-block; width: 18em; height: 6em; margin-bottom: 0.5em; padding-top: .6em; padding-bottom: .6em; color: #fff; background-color: #aaabbb; border-radius: 5px; border: solid #cccccc 1px; box-shadow: 2px 2px 1px #888888; clear:right; float:right; >.buttons a:active

Вы должны попытаться установить высоту и ширину 100%. Как это:

Старайтесь не вставлять CSS код в HTML… это приводит к беспорядку!

Принимая встроенный стиль из html, кажется, устраняет большинство проблем. Затем, как и @ArmanVirdi, добавьте ширину и высоту ссылки на 100%.

Теги , похоже, ничего не делают, поэтому они удаляются в нижнем HTML, а также тег

.

HTML

 
 
Link1 goes here 
 
Link2
goes
here 
 
Link3
goes
here 
 
Link4
goes
here 
 
 
 
 
Link1 goes here 
 
Link2
goes
here 
 
Link3
goes
here 
 
Link4
goes
here 
 
Link5
goes
here 
 
 

CSS

table < width: 100%; >.width-20 td < width: 20%; >.width-25 td < width: 25%; >.buttons < text-align: center; font-size: 1.0em; font-weight: bold; line-height: 200%; >.buttons a < display: inline-block; height: 100%; width: 100%; margin-bottom: 0.5em; padding-top: .6em; padding-bottom: .6em; color: #fff; background-color: #aaabbb; border-radius: 5px; border: solid #cccccc 1px; box-shadow: 2px 2px 1px #888888; >.buttons a:active

Источник

Кнопка которая выводит таблицу

Нужен простой код, который выведет таблицу при нажатие кнопки. (только на javascript).
Ссылки давать не надо, уже многое посмотрел, но как добавить таблицу в скрипт так и не понял.

Кнопка+Таблица

и сама табличка (не полная)

ну и тут у нас только tr и td

и так должно быть следующие, нажимаем кнопку всплывает окно с таблицей все.

Кнопка, которая выводит дату и время
Кнопка, которая выводить дату и время сообщением

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

кнопка которая выводит текст в Мемо1 и в Мемо2
Привет.Такой вопрос: Есть кнопка которая выводит текст в Мемо1 и в Мемо2. Как сделать так что бы.

Кнопка, которая записывает в таблицу значение
Не могу никак придумать как это сделать. Хочется создать кнопку, при нажатии на которую в таблицу.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

    script type="text/javascript"> function kk(){ var k = document.getElementById("k"); k.style.display == "none" ? k.style.display = "table" : k.style.display = "none"; } script> 
КНОПКА БОЛЬШАЯ И БЛЕСТЯЩАЯ
 
11
12
 
12
22
 
  

Сообщение было отмечено evgeniiii231 как решение

Решение

Сообщение от evgeniiii231

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var windowDom = document.createElement("div"); windowDom.className = "window"; var table = document.createElement("table"); var tableWidth = 3; var tableHeight = 2; for(var y = 0; y  tableHeight; y++){ var row = table.insertRow(); for(var x = 0; x  tableWidth; x++){ var cell = row.insertCell(); cell.innerText = y * tableWidth + x; } } windowDom.appendChild(table); document.body.appendChild(windowDom);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

html> head> /head> style> .window.hidden < display: none; >/style> body> h1> Кнопка+Таблица/center>/h1> p>input type="button" value=" Start" onclick="isEmail()">/p> div id="window" class="window hidden"> table frame="void" cellspacing="0" bordercolor="C75460" cellpadding="5" border="2"> tr>td>asdasd/td>/tr> /table> /div> script> function isEmail()< var win = document.getElementById("window"); win.className = win.className.split(" ").filter(function(className)< return className !== "hidden"; >).join(" "); > /script> /body> /html>

Источник

Создание таблицы с нажатием кнопки

Добрый день, я в html новичок, задача такая: на странице должна быть кнопка после нажатия на которую на этой же странице создавалась (появлялась) некая таблица (любого размера, с любым содержимым). Подскажите пожалуйста как это можно сделать?

Расчет даты из другой таблицы нажатием кнопки
К форме "Данные иностранного гражданина" привязаны две подчиненные формы: -.

Создание элементов нажатием кнопки
Всем привет форумчане! У меня возникла проблема! Мне надо чтобы при нажатии кнопки в TabControl.

Создание файла нажатием кнопки
Помогите пожалуйста написать скрипт, чтобы нажатием кнопки "button" на страничке в браузере, в.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

 html> head> script type="text/javascript" src="jquery.js">/script> script> $(document).ready(function()< $('#open').click(function()< $('#tab').css('display','table'); >); >); /script> style> #tab < display: none; >/style> /head> body> input id="open" type="button" value="Открыть таблицу"/> table id="tab" border="1"> tr> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> /tr> tr> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> /tr> tr> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> /tr> tr> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> td>таб/td> /tr> /table> /body> /html>

Источник

Создать таблицу по нажатию кнопки

Таблица создаётся после нажатия submit button и создаёт таблицу. После нажатия субмит таблица должна удаляться и создаваться снова.
Вот код, таблица проверяет данные и выводит таблицу, но при повторном нажатии затем строит ещё одну таблицу

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

SCRIPT LANGUAGE="JavaScript">  var tbody; var row; var td1; var td2; var td3; function addRow(id,i,j,k)  tbody = document.getElementById (id).getElementsByTagName("TBODY")[0]; row = document.createElement("TR") td1 = document.createElement("TD") td1.appendChild(document.createTextNode(i)) td2 = document.createElement("TD") td2.appendChild (document.createTextNode(j)) td3 = document.createElement("TD") td3.appendChild (document.createTextNode(k)) row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); tbody.appendChild(row); > function F() addRow('myTable','Элемент:','Введённые данные:','Результат:'); var re = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@([a-zA-Z0-9_-]+\.)+[a-zA-Z]$/; if (!window.document.forms[0].elements[0].value.match(re))  addRow('myTable','E-mail',window.document.forms[0].elements[0].value,'Данные не корректны!'); > else  addRow('myTable','E-mail',window.document.forms[0].elements[0].value,'Данные корректны'); > re = /^[a-zA-Z0-9_-]/; if (!window.document.forms[0].elements[1].value.match(re))  addRow('myTable','Пароль',window.document.forms[0].elements[1].value,'Данные не корректны!'); > else  addRow('myTable','Пароль',window.document.forms[0].elements[1].value,'Данные корректны'); > >

button ="javascript ://" onclick="F() return="0" ;">Проверить введённые данные/button>

Источник

How to Add a Button to an HTML Table Dynamically using JavaScript?

In HTML, tables are used to organize and present data in tabular format on a web page. They are generally used when we want to display a large amount of data which can be sorted, filtered, compared, etc.

While working with these tables, you might sometimes need to perform some actions on the table, such as editing or deleting a row or performing some calculations based on the data in a row or in the entire table.

To accomplish this, we generally add buttons to the last column of the table. These buttons can either be added to any column while creating the table in the HTML file or you can add them dynamically after creating the table.

In this article, We will explain how you can add a button to an HTML table dynamically using JavaScript. So without further ado let’s get started.

The first thing we need is the HTML table to which we want to add the button. If you already have an existing table, just add some id to it. If not, add a new one with some id.

Along with the table, create a button also which will be used to add buttons to the table dynamically:

 
 
First Name
 
Last Name
 
Action
 
 
John
 
Doe
 
 
James
 
Bond
 
 
William
 
Smith
 
 
 

Now, in the JS file, add a click event listener to the button using the addEventListener() method which will be fired every time someone clicks the button.

We want to add a button with the label ‘View’ to the last column of each row of the table whenever someone clicks on this button.

To accomplish that we have to iterate through the rows array of the table and run a for or while loop to one by one add the ‘View’ button to the last column of each row.

We will also attach a dummy function sayHi() to the ‘View’ button using the setAttribute() method. On clicking this button, a dummy message will be displayed to the user using the alert box.

Refer to the below JS code:

let buttonAdder = document.getElementById(‘addBtn’); // Fires on button click buttonAdder.addEventListener(‘click’, function (event) < let table = document.getElementById('userTable'); let rows = table.rows; // Loop through each row(except the header) for (let i = 1; i < rows.length; i++) < let cols = rows[i].cells; let lastCol = rows[i]['cells'][cols.length - 1]; // Create a new button element let button = document.createElement('button'); button.innerText = 'View'; // Attach sayHi() function to 'onclick' attribute button.setAttribute('onclick', 'sayHi()'); // Append the button to the last column lastCol.appendChild(button); >>); // Fires on ‘View’ button click function sayHi()

After running the above code, you will get the following output:

As you can see from the above output, as soon as we click the ‘Add Buttons’ button, it adds a ‘View’ button to the last column of each row. And, on clicking the ‘View’ button, it gives us an alert message with a custom message.

Display Table’s Row Data on Dynamically Added Button Click

In the last example, we attached a dummy function sayHi() to the dynamically added ‘View’ button which displays a dummy message to the user upon clicking.

But we can also display the real data of the row i.e. the first name and the last name of the corresponding row on button click.

To achieve that we have to pass the index of the row whose ‘View’ button is clicked to the sayHi() function as an argument. This row index can later be used to get the data of the corresponding row.

See the updated version of the above code which displays the first and last name data of the row on clicking:

let buttonAdder = document.getElementById('addBtn'); // Fires on button click buttonAdder.addEventListener('click', function (event) < let table = document.getElementById('userTable'); let rows = table.rows; // Loop through each row(except the header) for (let i = 1; i < rows.length; i++) < let cols = rows[i].cells; let lastCol = rows[i]['cells'][cols.length - 1]; // Create a new button element let button = document.createElement('button'); button.innerText = 'View'; // Attach sayHi() function to 'onclick' attribute & pass row index button.setAttribute('onclick', `sayHi($)`); // modified // Append the button to the last column lastCol.appendChild(button); > >); // Fires on 'View' button click function sayHi(rowIdx) < let table = document.getElementById('userTable'); let rows = table.rows; // Extract first & last Name let firstName = rows[rowIdx]['cells'][0].innerText; let lastName = rows[rowIdx]['cells'][1].innerText; alert(`Hi $$`); >

After running the above code, you will get the following output:

As you can see, now the actual data of the row is displayed on the ‘View’ button click instead of the custom message.

Conclusion

Adding a button to the HTML table dynamically is quite simple with JavaScript. You can create the button with the document.createElement() method and then append it to any specific column of the table using the appendChild() method.

If you want to add the button to multiple columns, you can loop through them using a for or while loop and then append it to any number of columns you want.

Related posts:

Источник