单击按钮时如何在表格中添加子行 [英] How to add sub row in table on button click

问题描述

我正在尝试创建一个动态表，我可以在其中单击按钮添加行和子行.

I'm trying to create a dynamic table where I can add rows and Sub rows on button click.

目前我有两个功能:

• 点击组按钮，添加一个新行，
• 点击流派"按钮，在同一流派内添加一个新的子行，

在组按钮上单击我可以添加一个新行，它工作正常，但在任何组中，如果我尝试添加 2+ 流派，那么表格布局就会混乱.

On Group button click I can Add a new row and it works fine, but in any group, If I try to add 2+ genres, then the table layout gets messed up.

$(document).on('click', '#my_table button.2ndName', function() {
  var $row = $(this).closest("tr");

  var nrid = $row.find(".nr").attr('rowspan');

  if (nrid == null) {
    nrid = 1;
  }

  nrid++;
  $row.find(".nr").attr('rowspan', nrid);
  var newRow = $("<tr>");
  var cols = "";
  var $td = $(this).closest("td");
  $td.find("#btn").hide();

  cols += '<td><input type="text" placeholder="" size="13" /><button class="2ndName" id="btn">+</button></td>    <td><input type="text" placeholder="" size="7"></td><td><input type="text"placeholder="" size="7"></td><td><input type="text" placeholder="" size="7"></td"><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="10" placeholder=""></td><td><input type="text" placeholder="" size="7"></td><td><input type="text" size="7" placeholder=""></td><td><input type="text" size="7" placeholder=""></td></tr>';
  newRow.append(cols);

  newRow.insertAfter($(this).parents().closest('tr'));

});

$(document).on('click', '#my_table button.site', function() {
  var $row = $(this).closest("tr");

  var newRow = $("<tr>");
  var cols = "";
  var $td = $(this).closest("td");
  $td.find("#btn").hide();

  cols += '<td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="site" style="float:right;">+</button></td><td><input type="text" placeholder="" size="13"><button class="2ndName" id="btn" style="float:right;">+</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>';
  newRow.append(cols);

  newRow.insertAfter($(this).parents().closest('tr'));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="my_table" id="my_table" border="1px" style="border-collapse: collapse;">

  <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>

  <tr>
    <td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="site" style="float:right;">+</button>
    </td>
    <td><input type="text" placeholder="" size="13"><button class="2ndName" id="btn" style="float:right;">+</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>

</table>

推荐答案

嗯...我用 JS 做到了

well... I done it with 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 ;)
全屏最好显示片段

这篇关于单击按钮时如何在表格中添加子行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！