动态添加/编辑表格HTML表格行

Question

This is driving me nuts, I've been trying all sorts of Javascripts and codes all day and can not get this to work, so hoping someone here can point me in the right direction please.

Here is my current table, and I want to create an "advanced" option that allows for other details to be added per row

So then if you click "advanced" it will expand out to these features, as well allowing you to add or delete additional rows

Here is the table code that I am trying to get to with the expanded view:

 <table border="0" align="center" cellpadding="5" cellspacing="0"> <tbody> <tr> <th>First Name</th> <th>Last Name</th> <th>Hourly Rate</th> <th>Contract Until</th> <th>Advanced Details</th> </tr> <tr> <td bgcolor="#F2F2F2" style="text-align: center">John</td> <td bgcolor="#F2F2F2" style="text-align: center">Smith</td> <td bgcolor="#F2F2F2" style="text-align: center">$ <input type="number" name="number57" id="number57"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Advanced"></td> </tr> <tr> <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td> <td bgcolor="#F2F2F2" style="text-align: center"> <label for="select">Project ID:</label> <select name="select" id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select></td> <td bgcolor="#F2F2F2" style="text-align: center">$ <input type="number" name="number57" id="number57"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / <input type="button" name="button4" id="button4" value="Remove"></td> </tr> <tr> <td style="text-align: center">Bob</td> <td style="text-align: center">Jones</td> <td style="text-align: center">$ <input type="number" name="number58" id="number58"></td> <td style="text-align: center"><input type="date" name="date2" id="date2"></td> <td style="text-align: center"><input type="button" name="button2" id="button2" value="Advanced"></td> </tr> <tr> <td bgcolor="#F2F2F2" style="text-align: center">Tom</td> <td bgcolor="#F2F2F2" style="text-align: center">Collins</td> <td bgcolor="#F2F2F2" style="text-align: center">$ <input type="number" name="number59" id="number59"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date3" id="date3"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button3" id="button3" value="Advanced"></td> </tr> <tr> <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td> <td bgcolor="#F2F2F2" style="text-align: center"> <label for="select">Project ID:</label> <select name="select" id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select></td> <td bgcolor="#F2F2F2" style="text-align: center">$ <input type="number" name="number57" id="number57"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / <input type="button" name="button4" id="button4" value="Remove"></td> </tr> <tr> <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td> <td bgcolor="#F2F2F2" style="text-align: center"> <label for="select">Project ID:</label> <select name="select" id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select></td> <td bgcolor="#F2F2F2" style="text-align: center">$ <input type="number" name="number57" id="number57"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td> <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / <input type="button" name="button4" id="button4" value="Remove"></td> </tr> <tr> <td style="text-align: center">&nbsp;</td> <td style="text-align: center">&nbsp;</td> <td style="text-align: center">&nbsp;</td> <td style="text-align: center">&nbsp;</td> <td style="text-align: center"><input type="submit" name="submit" id="submit" value="Submit"></td> </tr> </tbody> </table> 

Answer 1

Hard to suggest advice without some example code, but I think this does something similar.

https://jsfiddle.net/3gkwoe7j/4/

One note on dynamically adding elements, you need to attach the event listener to something static in the DOM, and then use a selector. (I assume you're using jQuery, since you tagged it in you question) So in my example:

$('.table')
    .on('click', 'button.advanced.toggle', function() {
    $(this)
      .text(this.textContent === "LESS" ? "ADVANCED" : "LESS")
      .parents('.person')
        .find('.advanced.section').toggle();
  })

I bind a click listener to the .table and then filter by the selector button.advanced.toggle .

Hope that helps.