Изменить внутри TD для ввода текста, нажав кнопку редактирования

Question

Я хотел бы изменить данные td в текст input, нажав кнопку редактирования с помощью Javascript или jQuery. У меня еще нет кода.

<thead>
 <tr>
  <th><span class="btn" onclick="editView()">Edit</th>
 </tr>
</thead>
<tbody>
  @foreach($apartmentList as $apartment)
    <tr>
      <td><input type="checkbox" name="apt[]" value="{{$apartment->id}}"id="checkApt"></td>
      <td id="aptst">{{ $apartment->street }}</td>
      <td id="aptnum">{{ $apartment->apartment_number }} </td>
      <td id="aptprice">{{ number_format($apartment->price, 2) }}</td>
      <td id="aptbed">{{$apartment->bedrooms}}</td>
      <td id="aptbath">{{$apartment->bathrooms}}</td>
      <td id="aptdate">{{ date('M d, Y', strtotime($apartment->created_at))}}</td>
      <td id="aptneigh">{{ $apartment->neighborhood->neighborhood ?? '' }}</td>
    </tr>
  @endforeach
</tbody>

Answer 1

Привет, мой друг. Это код, который я написал для тебя. Надеюсь, он тебе поможет. Ссылка https://jsfiddle.net/Asfak07/6xhyukw7/2/

        <table>

            <tr id="row_1">
                <td class="code">cd-1</td>
                <td class="name">asfak</td>
                <td class="place">chennai</td>
                <td id="1" class="edit">edit</td>
            </tr>

            <tr id="row_2">
                <td class="code">cd-2</td>
                <td class="name">ashok</td>
                <td class="place">vadapalani</td>
                <td id="2" class="edit">edit</td>
            </tr>

            <tr id="row_3">
                <td class="code">cd-3</td>
                <td class="name">mani</td>
                <td class="place">pollachi</td>
                <td id="3" class="edit">edit</td>
            </tr>
        </table>
        <script>
            //code for Click Function
            $(".edit").on("click",function(){
                // fetching a id for each row
                var id=$(this).attr("id");
                // selecting every td tags 
                $("tr>td").each(function(){
                    //getting value if input is present
                    var value=$(this).find('input').val();
                    if(value != undefined)
                    // removing input retaining the typed value
                    $(this).html(value);
                });
                    // getting every td without edit and replacing with input
               $("#row_"+id+">td").not(".edit").each(function(){
                var value=$(this).text();
                var classValue=$(this).attr("class");
                alert(value);
                $(this).html(`<input id="input_${classValue}_${id}" value="${value}"/>`);
               });
            })
            </script>