хорошо ... Я сделал это с JS
const myTable = document.querySelector('#my-table tbody') // Where it all happens
, RowBase = myTable.querySelector('tr').cloneNode(true) // Copy ref for each new line
;
myTable.querySelector('tr button.onGenre').TD_Group = myTable.querySelector('tr td') // tell him who it belongs to
;
myTable.onclick=e=> // for any click on the table
{
if (!e.target.matches('button.onGroup, button.onGenre')) return // except the others
let OnButton = e.target // and Adam named each thing...
, newRow = RowBase.cloneNode(true) // future new row
;
if (OnButton.className==='onGroup') // it's him !
{
newRow.querySelector('tr button.onGenre').TD_Group = newRow.querySelector('tr td') // this one belong to the new
myTable.appendChild( newRow )
}
else // (OnButton.className==='onGenre') // it's the other !
{
newRow.querySelector('td').remove() // remove <td... button class="onGroup" ...td>
newRow.querySelector('tr button.onGenre').TD_Group = OnButton.TD_Group // this one belong where is his reference onGroup
let nRowSp = parseInt(OnButton.TD_Group.getAttribute('rowspan')) +1 // compute new val for rowspan
OnButton.TD_Group.setAttribute('rowspan', nRowSp ) // put it on
OnButton.parentNode.parentNode.insertAdjacentElement('afterend',newRow ) // to add the new row in the right place
}
OnButton.remove(); // that's the law: any clicked button must disappear!
}
/* ----------------------------------------------------- *\
| special delivery -> how to recover the entered values |
\* ----------------------------------------------------- */
const ColsNames = [...document.querySelectorAll('#my-table thead td')].map(e=>e.textContent) // get all columns names
, ColsN_Nb = ColsNames.length // will not change, so much to know right away
;
document.getElementById('Bt-get-table-inputs').onclick=_=> // I did not find a simpler name
{
let Resp = [] // future solution
, Grp_id = 0 // we always need a reference
, Grp_Elm = null // out of respect for gregarious nature
;
myTable.querySelectorAll('tr').forEach(xTR=> // get each row
{
let inVals = xTR.querySelectorAll('input') // get all inputs
, newGrp = (inVals.length === ColsN_Nb) // if inputs numbers is full, or not
;
if (newGrp)
{
Grp_id++ // set new ref
Resp.push( { id:Grp_id, Group:inVals[0].value, elm:[] } )
Grp_Elm = Resp[(Grp_id-1)].elm // everything will belong to him
}
let vals = {}
inVals.forEach((inV,i)=>
{
if (!newGrp) vals[ ColsNames[i+1]] = inV.value
else if (i>0) vals[ ColsNames[i]] = inV.value
})
Grp_Elm.push( vals )
})
console.log(JSON.stringify(Resp,0,2 ) ) // for testing
}
#my-table {
margin-top: 3em;
border-collapse : collapse;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
#my-table thead td {
background-color : turquoise;
text-align : center;
padding : .7em 0;
white-space : nowrap;
}
#my-table tbody td {
width : 1em;
vertical-align : top;
}
#my-table td { border : 1px solid gray; }
#my-table tbody { background-color : lightsteelblue; }
#my-table tbody button { float : right; }
/* just to test snippet */
#Bt-get-table-inputs { position: fixed; top:0.5em; left:1em }
.as-console-wrapper { max-height: 100% !important; width: 40% !important; top: 0; left: 60% !important; }
<table id="my-table">
<thead>
<tr>
<td>Group</td><td>Genre</td><td>Movie Name</td><td>Imdb</td><td>Rotten Tomato</td>
<td>Lead Actress</td><td>Lead Actor</td><td>Year of Release</td><td>Revenue</td><td>Budget</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="1"><input type="text" size="9" placeholder=""><button class="onGroup"> + </button></td>
<td><input type="text" size="13" placeholder=""><button class="onGenre" > + </button></td>
<td><input type="text" size="7" placeholder=""></td>
<td><input type="text" size="7" placeholder=""></td>
<td><input type="text" size="7" placeholder=""></td>
<td><input type="text" size="7" placeholder=""></td>
<td><input type="text" size="10" placeholder=""></td>
<td><input type="text" size="7" placeholder=""></td>
<td><input type="text" size="7" placeholder=""></td>
<td><input type="text" size="7" placeholder=""></td>
</tr>
</tbody>
</table>
<!-- Just for test getting values -->
<button id="Bt-get-table-inputs">Get All values</button>
Не думаю, что это можно сделать просто с помощью jQuery;)
На весь экран лучше показать фрагмент