Блог

Главная - Вопросы по программированию - Браузер преобразует пробелы в html-атрибуты строки json

Браузер преобразует пробелы в html-атрибуты строки json

#javascript #html #json

Вопрос:

Я создаю динамические строки таблицы и tds в ней. В последнем td мне нужны теги привязки с onclick событием, передающим некоторые данные в виде строки json. Он работает нормально, если я не оставляю места для любого значения строки json, он преобразует все оставшиеся данные в атрибуты html после пробела. Я использую JSON.stringify(data) , но чувствую, что он не преобразовал его в реальную строку. Я не знаю!

Последние td строк таблицы в html просто отлично работают, даже если в значениях есть пробелы, так как ключи и значения являются данными формы. Я использую echo json_encode функцию onclick в

 <a href="#" data-toggle="modal" data-target="a{{$i}}" 
onclick='show_detail_modal(JSON.stringify(<?php echo json_encode($data);?>))' 
<i class="far fa-eye fa-sm"></i>
</a>
 
 var str_data = JSON.stringify(data);
var submit_type_text = $(form).find('button[type=submit]').text();
var tbl_id = main_form_id.replace('tabform', '') 'table';
var last_tr = $('#' tbl_id).children('tbody').children('tr:last');
var last_tr_no_plus_one = parseInt($(last_tr).children('td:first').text()) 1;
var actions = '<a href="#" data-toggle="modal" data-target="a' last_tr_no_plus_one
 '"onclick=show_detail_modal(' str_data ') style="color: inherit;"><i class="far fa-eye fa-sm"></i></a>amp;nbsp;';
var last_td_of_last_tr = actions;     
var inputs = $(form).find('.input');

var tr_and_tds = '<tr>';
    tr_and_tds  = '<td>' last_tr_no_plus_one '</td>';

    $.each(inputs, function(a, b){
        tr_and_tds  = '<td>' $(b).val() '</td>';                
    });
    
    tr_and_tds  = '<td>';
    tr_and_tds  = last_td_of_last_tr;
    tr_and_tds  = '</td>';
    tr_and_tds  = '</tr>';
    $('#' tbl_id).append(tr_and_tds);

введите описание изображения здесь

Обратите внимание, что после пробела в Нью-Йорке он преобразует остальные данные в атрибуты

Комментарии:

1. Проблема начинается намного раньше. Вы не можете заключить значение атрибута в " , когда значение также используется " (как это имеет место в JSON)

2. «Последний td строк таблицы в html просто отлично работает» — потому что вы используете один qoute ' для значения атрибута

3. Не создавайте элементы путем объединения строк. Используйте методы DOM, такие как document.createElement , а затем setAttribute()

4. @mohsinali на самом деле вам не хватает, чтобы закрыть a > скобку тегов . onclick=’show_detail_modal(JSON.stringify(<?php echo json_encode($данные);?>))'<? php echo json_encode($данные);?> > .. </a>

5. это просто ошибка при копировании и вставке на этот сайт 🙂

Ответ №1:

Поместите одинарные кавычки вокруг onclick атрибута, так как JSON использует двойные кавычки. Точно так же, как вы делаете в PHP-коде.

Используйте шаблонные литералы, чтобы упростить замену переменных в строки.

 var actions = `<a href="#" data-toggle="modal" data-target="a${last_tr_no_plus_one}" onclick='show_detail_modal(JSON.stringify(${str_data}))' style="color: inherit;"><i class="far fa-eye fa-sm"></i></a>amp;nbsp;`;

Обратите внимание, что это не будет работать, если str_data содержит одинарные кавычки.

Комментарии:

1. Это плохой вопрос или что-то в этом роде 🙁

2. ладно, не бери в голову, в любом случае спасибо тебе, приятель, за твою помощь

3. извини, бармен, у меня проблема, если ты там

4. когда он приземляется в «show_detail_modal()» по щелчку, он отображается как объект json, а не как строка, как я могу иметь его там как обычную строку

5. Попробуйте использовать show_detail_modal(JSON.stringify(${str_data}))

Метки: