JSFiddle - React, Tailwind, and code Playground

by budyniowski

HTML

<table id="__xmlview1--historyOfActivityTable-listUl" tabindex="0" class="sapMListModeNone sapMListShowSeparatorsAll sapMListTbl sapMListUl"><thead><tr tabindex="-1" id="__xmlview1--historyOfActivityTable-tblHeader" class="sapMListTblRow sapMLIBFocusable sapMListTblHeader"><th aria-hidden="true" id="__xmlview1--historyOfActivityTable-tblHeadHighlight" class="sapMListTblHighlightCol"></th><th id="__xmlview1--historyOfActivityTable-tblHead1" data-sap-width="30px" class="sapMListTblCell sapMListTblHeaderCell" style="width:30px;text-align:left"></th><th id="__xmlview1--historyOfActivityTable-tblHead2" data-sap-width="" class="sapMListTblCell sapMListTblHeaderCell" style="text-align:left"><span id="__text8" data-sap-ui="__text8" class="sapMText sapMTextBreakWord sapMTextMaxWidth sapUiSelectable" style="text-align:left">Date</span></th><th id="__xmlview1--historyOfActivityTable-tblHead3" data-sap-width="" class="sapMListTblCell sapMListTblHeaderCell" style="text-align:left"><span id="__text9" data-sap-ui="__text9" class="sapMText sapMTextBreakWord sapMTextMaxWidth sapUiSelectable" style="text-align:left">Author</span></th><th id="__xmlview1--historyOfActivityTable-tblHead4" data-sap-width="5px" class="sapMListTblCell sapMListTblHeaderCell" style="width:5px;text-align:left"></th><th id="__xmlview1--historyOfActivityTable-tblHead5" data-sap-width="" class="sapMListTblCell sapMListTblHeaderCell" style="text-align:left"><span id="__text10" data-sap-ui="__text10" class="sapMText sapMTextMaxWidth sapUiSelectable" style="text-align:left">Activity Type</span></th><th id="__xmlview1--historyOfActivityTable-tblHead6" data-sap-width="" class="sapMListTblCell sapMListTblHeaderCell" style="text-align:left"><span id="__text11" data-sap-ui="__text11" class="sapMText sapMTextMaxWidth sapUiSelectable" style="text-align:left">Date of the next contact</span></th><th id="__xmlview1--historyOfActivityTable-tblHead7" data-sap-width="30px" class="sapMListTblCell sapMListTblHeaderCell"...

JavaScript

$('#__button8-__xmlview1--historyOfActivityTable-3').click(function(e){
  if($('#jakies_id')) {
  	$('#jakies_id').remove();
  }else{
  	$(e.target).closest('tr').after(function() {
    return '<tr id="jakies_id">' + '<td colspan="6">Suspendisse iaculis non lectus condimentum condimentum. Ut eu vulputate nulla. Nullam nec eros semper, elementum odio id, malesuada velit. Proin posuere venenatis neque, quis venenatis enim tristique a. Integer condimentum iaculis eros, eget fermentum erat. Proin cursus, elit sed vehicula tincidunt, lectus arcu pulvinar justo, sed iaculis eros elit in justo. Praesent quis dolor non massa condimentum dictum.</td>' + '</tr>';
  });
  }

});
//$('#my_table > tbody > tr').eq(i-1).after(html);