0
私はJSONデータに基づいて更新されたテーブルを持っています。 テーブル内の各行には、対応するJSONオブジェクトの値を保持するチェックボックスがあります。これは、基本的にユーザーの情報です。 いずれかの行を選択し、保存して選択したユーザープロファイルを表示すると、選択したJSONオブジェクトも配列 'savedData'に格納されます。既存の配列に外部オブジェクトを追加する
「外部フォームを開く」ボタンをクリックするとポップアップするフォームを介してユーザーを外部に追加するオプションもあります。今、私はオブジェクトを作成し、そのフォームを提出すると同じ 'savedData'配列に格納しようとしています。同時に、 'div.parent'が生成され、&は 'div.container'にテーブルから選択された他のユーザと同じフォーマットで追加されます。
残念ながら、 'div.parent'は作成されておらず、外部オブジェクトは追加されていません。
この問題を解決するお手伝いをしてください。
function createTable() {
\t \t \t $.getJSON("https://api.randomuser.me/?results=5", function(data) {
\t \t \t \t $('#datatable tr:has(td)').remove();
\t \t \t \t data.results.forEach(function (record) {
\t \t \t \t \t var json = JSON.stringify(record);
\t \t \t \t \t $('#datatable').append(
\t \t \t \t \t \t $('<tr>').append(
\t \t \t \t \t \t \t $('<td>').append(
\t \t \t \t \t \t \t \t $('<input>').attr('type', 'checkbox')
\t \t \t \t \t \t \t \t \t \t \t .addClass('selectRow')
\t \t \t \t \t \t \t \t \t \t \t .val(json)
\t \t \t \t \t \t \t),
\t \t \t \t \t \t \t $('<td>').append(
\t \t \t \t \t \t \t \t $('<a>').attr('href', record.picture.thumbnail)
\t \t \t \t \t \t \t \t \t \t .addClass('imgurl')
\t \t \t \t \t \t \t \t \t \t .attr('target', '_blank')
\t \t \t \t \t \t \t \t \t \t .text(record.name.first)
\t \t \t \t \t \t \t),
\t \t \t \t \t \t \t $('<td>').append(record.dob)
\t \t \t \t \t \t)
\t \t \t \t \t);
\t \t \t \t })
\t \t \t }).fail(function(error) {
\t \t \t \t console.log("**********AJAX ERROR: " + error);
\t \t \t });
\t \t }
\t \t var savedData = new Map; // Keyed by image URL. Start with nothing.
\t \t function saveData(){
\t \t \t var errors = [];
\t \t \t // Add selected to map
\t \t \t $('input.selectRow:checked').each(function(count) {
\t \t \t \t // Get the JSON that is stored as value for the checkbox
\t \t \t \t var obj = JSON.parse($(this).val());
\t \t \t \t // See if this URL was already collected (that's easy with Set)
\t \t \t \t if (savedData.get(obj.picture.thumbnail)) {
\t \t \t \t \t errors.push(obj.name.first);
\t \t \t \t } else {
\t \t \t \t \t // Append it to the Map:
\t \t \t \t \t savedData.set(obj.picture.thumbnail, obj);
\t \t \t \t }
\t \t \t });
\t \t \t refreshDisplay();
\t \t \t if (errors.length) {
\t \t \t \t alert('The following were already selected:\n' + errors.join('\n'));
\t \t \t }
\t \t }
\t \t function refreshDisplay() {
\t \t \t $('.container').html('');
\t \t \t savedData.forEach(function (obj) {
\t \t \t \t // Reset container, and append collected data (use jQuery for appending)
\t \t \t \t $('.container').append(
\t \t \t \t \t $('<div>').addClass('parent').append(
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Name: '),
\t \t \t \t \t \t obj.name.first + ' ' + obj.name.last,
\t \t \t \t \t \t $('<br>'), // line-break between name & pic
\t \t \t \t \t \t $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Date of birth: '),
\t \t \t \t \t \t obj.dob, $('<br>'),
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
\t \t \t \t \t \t obj.location.street, $('<br>'),
\t \t \t \t \t \t obj.location.city + ' ' + obj.location.postcode, $('<br>'),
\t \t \t \t \t \t obj.location.state, $('<br>'),
\t \t \t \t \t \t $('<button>').addClass('removeMe').text('Delete'),
\t \t \t \t \t \t $('<button>').addClass('top-btn').text('Swap with top'),
\t \t \t \t \t \t $('<button>').addClass('down-btn').text('Swap with down')
\t \t \t \t \t) \t
\t \t \t \t);
\t \t \t \t resetEvents();
\t \t \t })
\t \t \t // Clear checkboxes:
\t \t \t $('.selectRow').prop('checked', false);
\t \t }
\t \t function logSavedData(){
\t \t \t // Translate Map to array of values:
\t \t \t var data = Array.from(savedData, function (pair) {
\t \t \t \t return pair[1];
\t \t \t });
\t \t \t // Convert to JSON and log to console. You would instead post it
\t \t \t // to some URL, or save it to localStorage.
\t \t \t console.log(JSON.stringify(data, null, 2));
\t \t }
\t \t $(document).on('click', '.removeMe', function() {
\t \t \t var key = $('.myLink', $(this).parent()).attr('src');
\t \t \t // Delete this from the saved Data
\t \t \t savedData.delete(key);
\t \t \t // And redisplay
\t \t \t refreshDisplay();
\t \t });
\t \t
\t \t \t /* Swapping the displayed articles in the result list */
\t \t \t function resetEvents() {
\t \t \t \t $(".top-btn, .down-btn").unbind('click');
\t \t \t \t handleEvents();
\t \t \t \t
\t \t \t \t $('.down-btn').click(function() {
\t \t \t \t \t var toMove1 = $(this).parents('.parent');
\t \t \t \t \t $(toMove1).insertAfter($(toMove1).next());
\t \t \t \t \t handleEvents();
\t \t \t \t });
\t \t \t \t $('.top-btn').click(function() {
\t \t \t \t \t var toMove1 = $(this).parents('.parent');
\t \t \t \t \t
\t \t \t \t \t $(toMove1).insertBefore($(toMove1).prev());
\t \t \t \t \t handleEvents();
\t \t \t \t });
\t \t \t }
\t \t \t \t
\t \t \t /* Disable top & down buttons for the first and the last article respectively in the result list */
\t \t \t function handleEvents() {
\t \t \t \t $(".top-btn, .down-btn").prop("disabled", false).show();
\t \t \t \t $(".parent:first").find(".top-btn").prop("disabled", true).hide();
\t \t \t \t $(".parent:last").find(".down-btn").prop("disabled", true).hide();
\t \t \t }
\t \t \t
\t \t \t $(document).ready(function(){
\t \t \t \t $('#showExtForm-btn').click(function(){
\t \t \t \t \t $('#extUser').toggle();
\t \t \t \t });
\t \t \t \t $("#extArticleForm").submit(function(){
addExtUser();
return false;
});
\t \t \t });
\t \t \t
\t \t \t function addExtUser() {
\t \t \t \t var name= $("#name").val();
\t \t \t \t var imgsrc = $("#myImg").val();
\t \t \t \t var dob = $("#dob").val();
\t \t \t \t
\t \t \t \t var errors = [];
extObj = {};
\t \t \t \t extObj = {};
\t \t \t \t extObj["name"]["title"] = "mr";
\t \t \t \t extObj["name"]["first"] = name;
\t \t \t \t extObj["dob"] = dob;
\t \t \t \t extObj["picture"]["thumbnail"] = imgsrc;
\t \t \t \t savedData.push(extObj);
\t \t \t \t if (savedData.get(imgsrc)) {
\t \t \t \t \t \t errors.push(title);
\t \t \t \t \t } else {
\t \t \t \t $('.container').append(
\t \t \t \t \t $('<div>').addClass('parent').append(
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Name: '),
\t \t \t \t \t \t +name+
\t \t \t \t \t \t $('<br>'), // line-break between name & pic
\t \t \t \t \t \t $('<img>').addClass('myLink').attr('src', imgsrc), $('<br>'),
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Date of birth: '),
\t \t \t \t \t \t +dob+ $('<br>'),
\t \t \t \t \t \t $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
\t \t \t \t \t \t +address+ $('<br>'),
\t \t \t \t \t \t $('<button>').addClass('removeMe').text('Delete'),
\t \t \t \t \t \t $('<button>').addClass('top-btn').text('Swap with top'),
\t \t \t \t \t \t $('<button>').addClass('down-btn').text('Swap with down')
\t \t \t \t \t) \t
\t \t \t \t);
\t \t \t \t resetEvents();
\t \t \t \t
\t \t \t }table, th, td {
\t \t \t border: 1px solid #ddd;
\t \t \t border-collapse: collapse;
\t \t \t padding: 10px;
\t \t }
\t \t .parent {
\t \t \t height: 25%;
\t \t \t width: 90%;
\t \t \t padding: 1%;
\t \t \t margin-left: 1%;
\t \t \t margin-top: 1%;
\t \t \t border: 1px solid black;
\t \t }
\t \t .parent:nth-child(odd){
\t \t \t background: skyblue;
\t \t }
\t \t .parent:nth-child(even){
\t \t \t background: green;
\t \t }
\t \t
\t \t label {
\t \t \t float: left;
\t \t \t width: 80px;
\t \t }
\t \t input, textarea {
\t \t \t width: 130px;
\t \t }
\t \t
\t \t #extUser {
\t \t \t border: 1px solid lightgrey;
\t \t \t border-radius: 5px;
\t \t \t display: none;
\t \t \t padding: 10px;
\t \t \t background-color: skyblue;
\t \t }
\t \t
\t \t #extUserForm {
\t \t \t margin: 3px;
\t \t \t padding: 5px;
\t \t }<button onclick="createTable()">Create Table</button>
\t \t <table id="datatable">
\t \t \t <tr><th>Select</th><th>Name</th><th>DOB</th></tr>
\t \t </table>
\t \t <button onclick="saveData()">Save Selected</button>
\t \t <br />
\t \t <div class="container"></div>
\t \t <button onclick="logSavedData()">Get Saved Data</button>
\t \t <button id="showExtForm-btn">Open External Form</button>
\t \t
\t \t <div id="extUser">
\t \t \t <form id="extUserForm">
\t \t \t \t <p>
\t \t \t \t \t <label for="name">Name:</label>
\t \t \t \t \t <input type="text" id="name" required>
\t \t \t \t </p>
\t \t \t \t <br />
\t \t \t \t <p>
\t \t \t \t \t <label for="myImg">Image:</label>
\t \t \t \t \t <input type="url" id="myImg" required>
\t \t \t \t </p>
\t \t \t \t <br />
\t \t \t \t <p>
\t \t \t \t \t <label for="dob">DOB:</label>
\t \t \t \t \t <input type="date" id="dob" required>
\t \t \t \t </p>
\t \t \t \t <br />
\t \t \t \t <button onclick="addExtUser()">Submit</button>
\t \t \t </form>
\t \t </div>
ワンダフルを、あなたにサーに感謝します！ – Sunny
私は前の次のボタンがあるポップアップを追加しました。私は解決できない問題のカップルを持っています。しかし、これは私のこの最後の質問ですね！ - http://stackoverflow.com/questions/43361662/disable-the-first-previous-button-on-dynamic-page-numbers – Sunny
私は一見する – trincot