Содержимое элементов раскидать по input'ам

182

25 октября 2018, 16:40

Есть верстка такого плана

<div class="wrap">
    <div class="item">
        <div class="item_l_col">07.08.2018</div>
        <div class="item_line_c_col">Название-1</div>
        <div class="item_line_r_col">Описание-1</div>
    </div>
    <div class="item">
        <div class="item_line_l_col">07.08.2018</div>
        <div class="item_line_c_col">Навазние-2</div>
        <div class="item_line_r_col">Описание-2</div>
    </div>                      
</div>

Тут я показал 2 блока item. На практике их может быть от нуля до бесконечности (условно).

Необходимо содержимое раскидать это по инпутам, что-то вроде такого:

<table class="wrapper" width="100%">
    <tbody>
    <!-- тут сколько угодно всяких строк, не важно -->
    <tr class="row">
        <td width="90%">
            <input type="text" name="group[0][date]" value="07.08.2018" />
            <input type="text" name="group[0][name]" value="Название-1" />
            <input type="text" name="group[0][desc]" Value="Описание-1" />
        </td>
        <td width="10%"><span class="remove">Remove</span></td>
    </tr>
    <tr class="row">
        <td width="90%">
            <input type="text" name="group[1][date]" value="07.08.2018" />
            <input type="text" name="group[1][name]" value="Название-2" />
            <input type="text" name="group[1][desc]" Value="Описание-2" />
        </td>
        <td width="10%"><span class="remove">Remove</span></td>
    </tr>
    </tbody>
</table>

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

За классы цепляться можно. Обертке td у полей тоже можно добавить класс для простоты обращения, если требуется.

Буду признателен js или jq (тут надо использовать each?) вариант исполнения.

Answer 1

$(function () { 
var tbody = $('table.wrapper tbody'); 
$('.wrap .item').each(function(index) { 
  var line1 = $(this).find('.item_line_l_col').html(); 
  var line2 = $(this).find('.item_line_c_col').html(); 
  var line3 = $(this).find('.item_line_r_col').html(); 
   
  tbody.append(`<tr class="row"> 
 
        <td width="90%">Iteration N ${index} 
            <input type="text" name="group[${index}][date]" value="${line1}" /> 
            <input type="text" name="group[${index}][name]" value="${line2}" /> 
            <input type="text" name="group[${index}][desc]" Value="${line3}" /> 
        </td> 
 
        <td width="10%"><span class="remove">Remove</span></td> 
    </tr>`) 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrap"> 
    <div class="item"> 
        <div class="item_line_l_col">07.08.2018</div> 
        <div class="item_line_c_col">Название-1</div> 
        <div class="item_line_r_col">Описание-1</div> 
    </div> 
    <div class="item"> 
        <div class="item_line_l_col">07.08.2018</div> 
        <div class="item_line_c_col">Навазние-2</div> 
        <div class="item_line_r_col">Описание-2</div> 
    </div> 
</div> 
 
 
<table class="wrapper" width="100%"> 
    <tbody> 
    <!-- тут сколько угодно всяких строк, не важно --> 
     
    </tbody> 
</table>

Если нужно, то можно вместо шаблона создавать элементы на каждой итерации цикла. Тогда будет удобно навесить обработчики на Remove

Answer 2

JS:

(function(){document.querySelectorAll('.wrap .item').forEach( 
	function (item, index) { 
	var date = item.querySelector('.item_l_col').innerText, 
		name = item.querySelector('.item_line_c_col').innerText, 
		desc = item.querySelector('.item_line_r_col').innerText, 
		tr = document.createElement('tr'); 
		table = document.querySelector('.wrapper tbody'); 
	 
	tr.innerHTML = `<tr><td width="90%"><input type="text" name="group[${index}][date]" value="${date}" /> 
	<input type="text" name="group[${index}][name]" value="${name}" /> 
	<input type="text" name="group[${index}][name]" value="${desc}" /> 
	</td> 
	<td width="10%"><span class="remove">Remove</span><td> 
	</tr>`; 
 
	table.append(tr); 
})}())

<div class="wrap"> 
    <div class="item"> 
        <div class="item_l_col">07.08.2018</div> 
        <div class="item_line_c_col">Название-1</div> 
        <div class="item_line_r_col">Описание-1</div> 
    </div> 
    <div class="item"> 
        <div class="item_l_col">07.08.2018</div> 
        <div class="item_line_c_col">Навазние-2</div> 
        <div class="item_line_r_col">Описание-2</div> 
    </div>                       
</div> 
 
 
<table class="wrapper" width="100%"> 
    <tbody> 
    </tbody> 
</table>