JSFiddle - React, Tailwind, and code Playground

by jstenkvist

HTML

<table border="0" cellspacing="0" cellpadding="0" id="tblCommunicationJobSite_Template" style="width:569px;border-top: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid;border-bottom: #000000 1px solid;">
	<tbody>
		<tr name="tblCommunicationJobSite_Row" id="tblCommunicationJobSite_Row" onactivate="setGridLastRowIndex(this,'tblCommunicationJobSite');">
			<td id="td_1" valign="top">
                <input DATAFLD="inpJobSiteCommunicationId" NAME="inpJobSiteCommunicationId" TYPE="hidden"/>
			</td>
			<td id="td_2" valign="top">
                <input DATAFLD="inpJobSiteContactId" NAME="inpJobSiteContactId" TYPE="hidden"/>
			</td>
			<td id="td_3" valign="top" class="data_row" width="16px" style="height:-1px;font-family:Arial;font-size: 11;font-color: #004040; padding-left: 2px; padding-right: 2px;">
                <input DATAFLD="inpPriority2_checkbox" TYPE="checkbox" style="color: '#000000';font-size: '';font-family: 'Arial';" name="inpPriority2_checkbox" id="inpPriority2_checkbox" helpid="19664" commonname="Prio_checkbox" gridname="tblCommunicationJobSite" onfocus="resetFocusOnAllGrids('tblCommunicationJobSite');" onchange="onChangeCheckbox(this,'tblCommunicationJobSite');" tabindex="8"/>
                <input DATAFLD="inpPriority2" TYPE="hidden" gridname="tblCommunicationJobSite" name="inpPriority2" id="inpPriority2"/>
			</td>
			<td id="td_4" valign="top" class="data_row" width="16px">
                <button NAME="btnDetails2" style="height:-1px; width: 20px;font-family:Arial;font-size: 11;font-color: #004040;position: relative;" onclick="openContactCommunications('inpJobSiteContactId',this,frmMain.inpJobsiteId.value,'JobSite');" onfocus="resetFocusOnAllGrids(null);">
                <img alt="enabled" id="enabled_19656" src="images/edit.gif" style="position: absolute; top:1px; left:1px;"/>
                <img alt="disabled" id="disabled_19656" src="images/disabled_edit.gif" style="visibility: hidden; position: absolute;...

JavaScript

// Get table body to copy to 
var copyToTable = $('#tblCommunicationJobSite tbody:last');
var clonedRow;
// Get the last row in the template table and clone to new row
var row = $("#tblCommunicationJobSite_Template tr:last");
clonedRow = row.clone();



clonedRow.children().each(function(){
//    $this.css( "background-color", "red" );
//    $this.children().each(function() {
      alert($(this).attr('id'));
    alert($(this).children().length);
//    });
    });

// Get first td (column) of new row

    
//.css( "background-color", "red" );



//$( "li.third-item" ).next().css( "background-color", "red" );
//}

copyToTable.append(clonedRow);