HTML-таблица отображается неправильно
У меня есть таблица HTML с данными JSON, я создаю один столбец в качестве поля ввода, заголовки моей таблицы Code, Item Name, Unitcode, Quantity и AcceptedQty, в которых я делаю поле ввода только для принятого количества, но поле количества также преобразуется в поле ввода, я не знаю, что я делаю неправильно
var tableDataDraft = [{
"Code": "1326",
"Item Name": "PINEAPPLE KG",
"Unitcode": "NOS",
"Quantity": "3.00",
"AcceptedQty": "3.00"
},
{
"Code": "1494",
"Item Name": "2D CAKE CHARGES PER KG",
"Unitcode": "NOS",
"Quantity": "3.00",
"AcceptedQty": "3.00"
}
]
function addTableDraft(tableDataDraft) {
var col = Object.keys(tableDataDraft[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableDataDraft.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input"); //creating input field hidden
hiddenField.style.display = "none";
var tabledata = tableDataDraft[i][col[j]];
if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Name');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableDataDraft[i]['Unitcode'] === tableDataDraft[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Unit_code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableDataDraft[i]['Quantity'] === tableDataDraft[i][col[j]]) { //this quantity field i don't want to be input field
hiddenField.setAttribute('name', 'Quantity');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableDataDraft[i]['AcceptedQty'] === tableDataDraft[i][col[j]]) { //this one i want to be a input field
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "AcceptedQty");
quantityField.setAttribute("autocomplete", "on");
quantityField.setAttribute("value", tabledata);
quantityField.setAttribute("type", "tel");
quantityField.setAttribute("required", "required");
quantityField.classList.add("dataReset");
quantityField.toLocaleString('en-IN');
tabCell.appendChild(quantityField);
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("table");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class = "table-responsive" id = "commonDvScroll">
<table id=table></table>
</div>почему это поле «Количество» также отображается как поле ввода, я не знаю
Поскольку мой код немного длинный, потому что я добавляю HTML-форму Attributes, потому что я хочу, чтобы все данные были в моем бэкэнде, поэтому я сериализую свою форму во время вызова ajax.
Я прокомментировал все строки, где я что делаю, чтобы вам всем было легче понять
@designtocode, который я создал, чтобы показать AcceptedQty в качестве поля ввода, здесь я говорю о Quantity поле ввода
—
02.04.2019 08:28
@dheerajkumar Это потому, что значение Quantity и AcceptedQty одинаково
—
02.04.2019 08:29
@CarstenLøvboAndersen Я тоже так думаю, но проблема в том, что всегда одно и то же будет редактируемым, а другое непобедимым
—
02.04.2019 08:32
@dheerajkumar проблема с этим разделом tableDataDraft[i]['AcceptedQty'] === tableDataDraft[i][col[j]]. Попробуйте изменить значение AcceptedQty на 4, и это сработает. Также добавьте table.innerHTML = tabledata для Quantity блока if.
—
02.04.2019 08:46
@ raghav710, но проблема в том, что когда страница загружается изначально, оба столбца будут иметь одинаковые данные.
—
02.04.2019 08:47
@dheerajkumar Я попытался объяснить свою точку зрения в своем ответе. Дайте мне знать, если это прояснит
—
02.04.2019 08:55
@raghav710 позвольте мне проверить это один раз
—
02.04.2019 09:09
@raghav710 привет, сэр, у меня есть небольшое сомнение
—
02.04.2019 09:18
@dheerajkumar извините за задержку. Пожалуйста, спросите ваши сомнения
—
04.04.2019 04:51
@ raghav710 это уже очищено, сэр
—
04.04.2019 07:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
11
116
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Проблема в том, что при вставке значений в строку вы сравниваете значения столбца вместо имя столбца. Это вызовет проблемы, если значения совпадают, например, Quantity и AcceptedQty имеют одинаковое значение 3.0. Попробуйте изменить один на 4.0, и вы заметите, что это работает.
Вот упрощенная версия вашего кода, которая проверяет, является ли текущий столбец AcceptedQty, и показывает поле ввода только для этого. У вас все еще могут быть другие блоки if, но убедитесь, что условие что-то вроде if (col[j] === 'Code') или (col[j] === 'Quantity') и т. д.
var tableDataDraft = [{
"Code": "1326",
"Item Name": "PINEAPPLE KG",
"Unitcode": "NOS",
"Quantity": "3.00",
"AcceptedQty": "3.00"
},
{
"Code": "1494",
"Item Name": "2D CAKE CHARGES PER KG",
"Unitcode": "NOS",
"Quantity": "3.00",
"AcceptedQty": "3.00"
}
]
function addTableDraft(tableDataDraft) {
var col = Object.keys(tableDataDraft[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableDataDraft.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input"); //creating input field hidden
hiddenField.style.display = "none";
var tabledata = tableDataDraft[i][col[j]];
if (col[j] === 'AcceptedQty') {
//this one i want to be a input field
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "AcceptedQty");
quantityField.setAttribute("autocomplete", "on");
quantityField.setAttribute("value", tabledata);
quantityField.setAttribute("type", "tel");
quantityField.setAttribute("required", "required");
quantityField.classList.add("dataReset");
quantityField.toLocaleString('en-IN');
tabCell.appendChild(quantityField);
}
else
{ //now setting html attributes
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("table");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class = "table-responsive" id = "commonDvScroll">
<table id=table></table>
</div>здравствуйте, не могли бы вы проверить это один раз stackoverflow.com/questions/55846400/…
—
25.04.2019 13:52
Измените способ проверки возвращаемых данных. Вместо того, чтобы проверять, совпадает ли значение, проверьте ключ данных следующим образом.
if (col[j] === 'Quantity')
Затем вы можете вставить данные для этого конкретного столбца или ключа данных.
var tableDataDraft = [{
"Code": "1326",
"Item Name": "PINEAPPLE KG",
"Unitcode": "NOS",
"Quantity": "3.00",
"AcceptedQty": "7.00"
},
{
"Code": "1494",
"Item Name": "2D CAKE CHARGES PER KG",
"Unitcode": "NOS",
"Quantity": "3.00",
"AcceptedQty": "10.00"
}
]
function addTableDraft(tableDataDraft) {
var col = Object.keys(tableDataDraft[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableDataDraft.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input"); //creating input field hidden
hiddenField.style.display = "none";
var tabledata = tableDataDraft[i][col[j]];
if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Name');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableDataDraft[i]['Unitcode'] === tableDataDraft[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Unit_code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (col[j] === 'Quantity') { //this quantity field i don't want to be input field
var quantityNoEdit = document.createElement("input");
quantityNoEdit.style.border = "none";
quantityNoEdit.style["text-align"] = "right";
quantityNoEdit.setAttribute("name", "Quantity");
quantityNoEdit.setAttribute("autocomplete", "on");
quantityNoEdit.setAttribute("value", tabledata);
quantityNoEdit.setAttribute("type", "tel");
quantityNoEdit.setAttribute("required", "required");
quantityNoEdit.classList.add("dataReset");
quantityNoEdit.toLocaleString('en-IN');
quantityNoEdit.disabled = true;
tabCell.appendChild(quantityNoEdit);
hiddenField.setAttribute('name', 'Quantity');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
console.info('Quantity:' + tableDataDraft[i][col[j]]);
}
if (tableDataDraft[i]['AcceptedQty'] === tableDataDraft[i][col[j]]) { //this one i want to be a input field
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "AcceptedQty");
quantityField.setAttribute("autocomplete", "on");
quantityField.setAttribute("value", tabledata);
quantityField.setAttribute("type", "tel");
quantityField.setAttribute("required", "required");
quantityField.classList.add("dataReset");
quantityField.toLocaleString('en-IN');
tabCell.appendChild(quantityField);
console.info('AcceptedQty:' + col[j]);
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("table");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)<table id = "table"></table>Другие вопросы по теме
Можем ли мы вызвать событие tabkey для перемещения курсора к следующему элементу для выбора2
Отсутствует параметр просмотра, связанный с загрузкой, в tinymce
Вставьте тег <span>, используя замену javascript
Как изменить дату выбора даты на основе первого выбора даты в jquery
Как получить выбранные значения серийного номера строки флажка в текстовом поле
Как создать динамический элемент выбора раскрывающегося списка, количество опций которого изменяется в зависимости от числа дочерних элементов, которые имеет определенный div?
Добавить класс к текущей ссылке, если он соответствует текущему URL-адресу?
Как вызвать функцию, связанную с ajax, внутри цикла в javascript?
Работа с несколькими строками с помощью js
Как сравнить e.currentTarget и e.Target?
Похожие вопросы
Проблема с массивом 2D-текстуры Threejs при чтении необработанных данных изображения
Создание представления Couchdb с ключами на основе идентификаторов элементов подмассива
Можем ли мы вызвать событие tabkey для перемещения курсора к следующему элементу для выбора2
Замените переменную строку на регулярное выражение nodejs
JS Как изменить цвет класса css из javascript?
Можно ли установить определенные реквизиты VueRouter?
Страница прокручивается вверх при каждом размытии ввода
Выполнение некоторых запросов с использованием mithril.js на обратном прокси-сервере nginx
Как поддерживать поток для загрузки панелей?
Отсутствует параметр просмотра, связанный с загрузкой, в tinymce
«Почему это поле «Количество» также отображается как поле ввода, я не знаю», это из-за этого
var quantityField = document.createElement("input");