Javascript CRUD

Моя проблема в том, что функция редактирования будет отображать undefined в поле ввода, но на моей консоли отображается URL-адрес img ..

Не могли бы вы исправить мой сценарий, почему он отображает undefined

Это мой код js, в котором я создал 3 функции: и

my.js

function delete_row(no)
{

    document.getElementById("row"+no+"").outerHTML = "";
}


function add_row(){   
     var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
        if (new_image&&new_title&&new_description != "") {
            var table=document.getElementById("data_table");
            var table_len=(table.rows.length)-1;
            var row = table.insertRow(table_len).outerHTML=
            "<div id='row"+table_len+"'><img id='image_row"+table_len+"' src = "+new_image+"><div id='title_row"+table_len+"'>"+new_title+
            "</div><div id='description_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'><input type='button' value='Edit' class='edit' onclick='edit_row("+table_len+")'></div></div>";

            document.getElementById("new_image").value = "";
            document.getElementById("new_title").value = "";
            document.getElementById("new_description").value = "";
    }
}

function edit_row(no){

      var image=document.getElementById("image_row"+no).getAttribute("src");
      console.info(image);
      var title=document.getElementById("title_row"+no);
      console.info(title);
      var description=document.getElementById("description_row"+no);
      console.info(description);

      var image_data = image.innerHTML;
      var title_data = title.innerHTML;
      var description_data =description.innerHTML;
      document.getElementById("new_image").value=image_data;
      document.getElementById("new_title").value=title_data;
      document.getElementById("new_description").value=description_data;

}

Это мой html-код, поэтому у меня только div и таблицы

index.html

<div id = "wrapper">
    <h1 align = "center">My Todo App</h1>
    <div id = "container">
        <form id = "myForm">
            <table align='center' cellspacing=2 cellpadding=5>
            <tr>
                <th>Image Link</th>
                <th>Title</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><input type = "text" id = "new_image"></td> 
                <td><input type = "text" id = "new_title"></td>
                <td><input type = "text" id = "new_description"></td>
                <td><input type = "button" class = "add" onclick = "add_row();" value = "SAVE"></td>
            </tr>
        </table>
        </form>
    </div>

    <div id = "content_container">
        <div>
            <table align='center' cellspacing=2 cellpadding=5 id = "data_table">

        </table>
        </div>
    </div>
</div>

а также как добавить новые отредактированные данные при нажатии кнопки сохранения, в моем случае это добавит еще одну строку.

javascript crud

26.06.2018 11:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

363

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Удалить image.innerHTML внутри функции edit_row(no)

Добавлена новая функция по вашему вопросу

function delete_row(no)
{

    document.getElementById("row"+no+"").outerHTML = "";
}


function add_row(){   
     var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
        if (new_image&&new_title&&new_description != "") {
            var table=document.getElementById("data_table");
            var table_len=(table.rows.length)-1;
            var row = table.insertRow(table_len).outerHTML=
            "<div class='myrow'><div id='row"+table_len+"'><img id='image_row"+table_len+"' src = "+new_image+"><div id='title_row"+table_len+"' class='titleData'>"+new_title+
            "</div><div class='descData' id='description_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'><input type='button' value='Edit' class='edit' onclick='edit_row("+table_len+",this)'></div></div></div>";

            document.getElementById("new_image").value = "";
            document.getElementById("new_title").value = "";
            document.getElementById("new_description").value = "";
    }
}

function edit_row(no,ref){
      ref.value = "Save";
      ref.removeAttribute("onclick");
      
      
      var image=document.getElementById("image_row"+no).getAttribute("src");
      console.info(image);
      var title=document.getElementById("title_row"+no);
      console.info(title);
      var description=document.getElementById("description_row"+no);
      console.info(description);

      var image_data = image; // remove image.innerHTML
      var title_data = title.innerHTML;
      var description_data =description.innerHTML;
      document.getElementById("new_image").value=image_data;
      document.getElementById("new_title").value=title_data;
      document.getElementById("new_description").value=description_data;
      
      ref.setAttribute("onclick","saveEdit(this,'"+no+"')");
}

function saveEdit(ref,no)
{
 var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
     
     var parent= (ref.parentElement).parentElement;
     var img=parent.firstChild.setAttribute("src",new_image);
     var list = document.getElementById(parent.id);
     var title=list.getElementsByClassName("titleData")[0];
     var desc=list.getElementsByClassName("descData")[0];
     
     title.innerHTML=new_title;
     desc.innerHTML=new_description;
     
           ref.value = "Edit";
      ref.removeAttribute("onclick");
       ref.setAttribute("onclick","edit_row("+no+",this)");
   
    document.getElementById("new_image").value = "";
            document.getElementById("new_title").value = "";
            document.getElementById("new_description").value = "";
}

<div id = "wrapper">
    <h1 align = "center">My Todo App</h1>
    <div id = "container">
        <form id = "myForm">
            <table align='center' cellspacing=2 cellpadding=5>
            <tr>
                <th>Image Link</th>
                <th>Title</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><input type = "text" id = "new_image"></td> 
                <td><input type = "text" id = "new_title"></td>
                <td><input type = "text" id = "new_description"></td>
                <td><input type = "button" class = "add" onclick = "add_row();" value = "SAVE"></td>
            </tr>
        </table>
        </form>
    </div>

    <div id = "content_container">
        <div>
            <table align='center' cellspacing=2 cellpadding=5 id = "data_table">

        </table>
        </div>
    </div>
</div>

спасибо за помощь, но для кнопки сохранения, как я могу сделать вместо того, чтобы создавать новую кнопку сохранения в div, сохранит отредактированную форму, как насчет использования <td><input type = "button" class = "add" onclick = "add_row();" value = "SAVE"></td> после того, как нажмите `` Сохранить '' вместо добавления, он сохранит отредактированную часть

— 27.06.2018 04:20

26.06.2018 11:53