Html кнопка добавления строки

Как добавить дополнительную строку html-таблицы после нажатия кнопки, используя jQuery?

и каждый раз, когда я нажимаю тег ссылки на ‘add author’, я хочу создать дополнительную таблицу таблиц, такую ​​как:

Я посмотрел на .append(), и я точно не знаю, как использовать его для моей ситуации. И я хотел бы иметь возможность добавлять бесконечное количество новых строк таблицы. Как это сделать?

3 ответа

Во-первых, исправьте свой HTML как:

(Я добавил отступы только для видимости) и не использовать встроенный JavaScript. Кроме того, будьте последовательны, желательно использовать » (двойные кавычки) для атрибутов HTML, ‘ (одинарные кавычки) для строк JavaScript.

Во-вторых, сделайте что-нибудь подобное:

jQuery(function()< var counter = 1; jQuery('a.add-author').click(function(event)< event.preventDefault(); var newRow = jQuery(''); counter++; jQuery('table.authors-list').append(newRow); >); >); 

Он добавит строку в таблицу с каждым щелчком по ссылке, имеющей класс add-author (просто чтобы убедиться, что никакая другая ссылка не влияет), увеличивая число в конце имени каждого вставленного имени поля на 1. Строка будет вставлена ​​в конце таблицы с классом authors-list (той же причине, что и для класса для ссылки). См. этот jsfiddle в качестве доказательства.

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

@Qlidnaque: Просто будьте последовательны и используйте разные типы кавычек (разные для JavaScript и разные для HTML / CSS, чтобы минимизировать вероятность ошибок). В случае PHP это более важно, потому что, когда вы используете двойные кавычки для строк, которые не содержат никаких переменных, вы можете случайно оказаться в ситуации, когда появляется какая-то ошибка, и вы не можете быстро ее найти. В случае JavaScript это больше о выборе стандарта кодирования. Я стараюсь следовать стандарту кодирования MooTools .

@Tadeck, как я могу отобразить динамические данные в строке таблицы, которая приходит с PHP? например, у меня есть окна выбора во всех тдс, и там данные поступают из БД, таких как страна, доктор специализация в дополнительных. Заранее спасибо.

@MuddasirAbbas: Это действительно широкая тема, и ответы на нее зависят от того, спрашиваете ли вы о запуске обновления, запросе с сервера, обработке на сервере, извлечении, добавлении в таблицу или о ее визуальном различии. Этот ответ действительно обрабатывает только часть «добавление в таблицу». Если вы будете более конкретны, я постараюсь указать вам правильные ресурсы.

@Tadeck Я пытаюсь добавить ту же строку, когда пользователь нажимает на значок + и хочу скрыть эту строку на значок щелчка. эту функцию я пытаюсь создать, но я запутался, как я могу показать динамические данные php в jquery append или после функции. Спасибо

Просто интересно, почему вы оборачиваете строку, содержащую разметку для новой строки в jQuery( . ) ?

Источник

Нажатием на кнопку добавляем строку в таблицу

Доброго времени суток, уважаемые форумчане.
Страничка, таблица, в таблице кнопка. Как сделать так, чтобы по onclick вставить в эту таблицу ещё одну строку с несколькими ячейками, в которых есть элементы?

Нажатием на кнопку добавляем строку в таблицу
Наткнулся на давнешнюю тему по добавлению строк таблицу.

Добавляем данные в зависимую таблицу
Имеется таблица, которая зависит от трех таблиц, т.е. является для них дочерней. Из данных трех.

Если товар пришел по другой цене,то добавляем его в таблицу.
Как сделать в Delphi 7,чтобы ,например было:"Если товар пришел по другой цене,то добавляем его в.

Тупизм с нажатием на кнопку
При нажатии на кнопку вниз или вверх длолжно выполняться следуйщее private void.

$('#button').click(function() { $('#table').html("12"); })

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

Решение

table id="node" border="1"> tr> td>button id="addRow">add row/button>/td> /tr> /table>

document.getElementById("addRow").onclick = function() { var row = document.createElement("tr"); row.innerHTML = "test"; document.getElementById("node").appendChild(row); }

Источник

How to Add Row to HTML Table Using JavaScript

Sometimes, while developing a website, there can be a requirement to create or remove rows and cells or add data in a table dynamically using JavaScript. JavaScript is a dynamic language that helps in dynamically controlling, gaining access to, and modifying HTML components on the client side. More specifically, it can be utilized to add a row to an HTML table.

This manual will use JavaScript to explain the procedure for adding a row to a table.

How to Add Row to HTML Table Using JavaScript?

For adding a row in a table, use the following procedures:

Let’s check each procedure individually.

Method 1: Add Row to HTML Table Using insertRow() Method

If you intend to add the row at the last/end of the table, then pass index “-1” as an argument.

Use the following syntax for adding rows in a table with the help of the insertRow() method:

Here, “index” indicates the position where you want to add a new row, such as at the end of the table or at the start.

Example 1: Adding a Row at the Top/Start of the Table

Here, we will create a table and a button in an HTML file using the HTML and tags. The table contains three rows and three columns or cells:

Then, create a button which will invoke the “addRow()” button when clicked:

For styling the table, we will set the border of each cell and the table as given below:

Now, we will add rows in the table at the top/start of the table using JavaScript. To do so, define a function named “addRow()” that will be called on the button’s onclick() event. Then, fetch the created table using the “getElementById()” method. After that, call the “insertRow()” method by passing the “0” index as a parameter that indicates the row will be added at the start of the table.

Then, invoke the “insertCell()” method by passing indexes that show how many cells will be added to the row. Finally, add the text data or text in cells using “innerHTML” property:

functionaddRow ( ) {
var tableRow = document. getElementById ( «table» ) ;
var row = tableRow. insertRow ( 0 ) ;
var cell1 = row. insertCell ( 0 ) ;
var cell2 = row. insertCell ( 1 ) ;
var cell3 = row. insertCell ( 2 ) ;
cell1. innerHTML = «Cell of New Row» ;
cell2. innerHTML = «Cell of New Row» ;
cell3. innerHTML = «Cell of New Row» ;
}

As you can see in the output, the new row is added at the top of the existing table by clicking on the button:

Example 2: Adding a Row at the End of the Table

If you want to insert a row at the last/end of the table, pass the “-1” index to the “insertRow()” method. It will add the row at last when the button is clicked:

functionaddRow ( ) {
var tableRow = document. getElementById ( «table» ) ;
var row = tableRow. insertRow ( — 1 ) ;
var cell1 = row. insertCell ( 0 ) ;
var cell2 = row. insertCell ( 1 ) ;
var cell3 = row. insertCell ( 2 ) ;
cell1. innerHTML = «Cell of New Row» ;
cell2. innerHTML = «Cell of New Row» ;
cell3. innerHTML = «Cell of New Row» ;
}

Let’s move to the other method!

Method 2: Add Row to HTML Table by Creating New Element

Follow the provided syntax to create a new element for adding a row in a table using JavaScript:

Here, the “tr” is the table row.

Example

We will now use the same previously created table in HTML with a CSS file, but in the JavaScript file, we will use the “createElement()” method. Then, add the data or text in the cells using the “innerHTML” property. Lastly, invoke the “appendChild()” method that will add the cells in a row and then the row in a table:

functionaddRow ( ) {
var tableRow = document. getElementById ( «table» ) ;
var row = document. createElement ( «tr» ) ;
var cell1 = document. createElement ( «td» ) ;
var cell2 = document. createElement ( «td» ) ;
var cell3 = document. createElement ( «td» ) ;
cell1. innerHTML = «Cell of New Row» ;
cell2. innerHTML = «Cell of New Row» ;
cell3. innerHTML = «Cell of New Row» ;
row. appendChild ( cell1 ) ;
row. appendChild ( cell2 ) ;
row. appendChild ( cell3 ) ;
tableRow. appendChild ( row ) ;
}

The output shows that the new row is successfully added at the end of the table:

We have compiled all the methods for adding a row in a table using JavaScript.

Conclusion

For adding a row in a table, use the two approaches: insertRow() method or create a new element using JavaScript predefined methods, including the appendChild() method and the createElement() method. You can add a row at the start of the end of the table using the insertRow() method by passing indexes. This manual explained the procedures for adding a new row in a table by clicking on a button using JavaScript.

About the author

Farah Batool

I completed my master’s degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.

Источник

Как создать кнопку, которая добавляет строку с HTML-тегами и классами?

Основываясь на этой ссылке, я попытался добавить новую кнопку, которая позволяет мне вставлять строку в позицию курсора. Он работает до сих пор, однако мне пришлось изменить эту строку:

this.quill.insertText(cursorPosition, "★"); 

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '★'); 

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

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '★'); 

Однако всякий раз, когда я нажимаю кнопку, класс просто полностью отбрасывается. На самом деле, вместо тега i, я получаю тег em, который работает для того, что я хочу сделать (курсив), но он все еще раздражает. Как я могу убедиться, что теги и класс остаются неизменными при нажатии кнопки? Все, что я хочу сделать, это нажать кнопку и немного строки, заключенной в промежутке, с классом, который появится в редакторе. Как я могу это достичь?

даже если вы отредактируете HTML прямо в devtools, jquill восстановит и заменит i на em . Это означает, что вы не можете иметь свой собственный html внутри редактора, так как он стандартизирует весь ввод html. Так что, хотя я хочу достичь этого, он не может работать

3 ответа

Обновление: 24 апреля-18

Поэтому потребовалось много времени, чтобы на самом деле понять это и заставить его работать. Это можно сделать, создав свой собственный Blot и переопределив italic пятно

let Inline = Quill.import('blots/inline'); class Icon extends Inline < static create(value) < let node = super.create(value); if (value) < console.log(value) node.setAttribute('class', value); >return node; > static formats(domNode) < console.log(domNode) return domNode.getAttribute("class"); >format(name, value) < console.log(name, value) if (name !== this.statics.blotName || !value) return super.format(name, value); if (value)< this.domNode.setAttribute('class', value); >> > Icon.blotName = 'icon'; Icon.tagName = 'span'; Quill.register(Icon); var BackgroundClass = Quill.import('attributors/class/background'); var ColorClass = Quill.import('attributors/class/color'); var SizeStyle = Quill.import('attributors/style/size'); Quill.register(BackgroundClass, true); Quill.register(ColorClass, true); Quill.register(SizeStyle, true); var quill = new Quill('#editor-container', < modules: < toolbar: '#toolbar-container' >, placeholder: 'Compose an epic. ', theme: 'snow' >); var customButton = document.querySelector('#custom-button'); customButton.addEventListener('click', function() < quill.insertText(quill.getSelection().index, "★\n", 'icon', 'fa fa-icon fa-icon-green'); >); 

Вот код для одного и того же

Оригинальный ответ

QuillJS — это богатый текстовый редактор, а не редактор HTML WYSIWYG. Таким образом, вы не можете получить свой собственный html внутри одного и того же

В вышеприведенной ручке кода щелкните источник, попробуйте код и нажмите кнопку источника снова.

Вид источника

Вид источника → Вид пользовательского интерфейса → Вид источника

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

Поэтому либо вы оставляете это требование, либо вы выбираете другой редактор для своей работы. Некоторые темы, на которые вы должны обратить внимание

Источник