Addning rows from xml

Addning rows last in a table using a template table and clone.

by jstenkvist

HTML

<script id="tblCommunicationCustomer_system_grid_xmldata" type="application/xml">
    <entitys>
        <entity>
            <inpPriority>true</inpPriority>
            <inpCustomerCommunicationName>Test Testman</inpCustomerCommunicationName>
            <inpCustomerCommunicationData>[email protected]</inpCustomerCommunicationData>
            <selCustomerCommunicationType>2</selCustomerCommunicationType>
        </entity>
        <entity>
            <inpPriority>false</inpPriority>
            <inpCustomerCommunicationName>Test 2</inpCustomerCommunicationName>
            <inpCustomerCommunicationData>[email protected]</inpCustomerCommunicationData>
            <selCustomerCommunicationType>3</selCustomerCommunicationType>
        </entity>
        <entity>
            <inpPriority>true</inpPriority>
            <inpCustomerCommunicationName>Test 2</inpCustomerCommunicationName>
            <inpCustomerCommunicationData>555 555 555</inpCustomerCommunicationData>
            <selCustomerCommunicationType>1</selCustomerCommunicationType>
        </entity>
        <entity>
            <inpPriority></inpPriority>
            <inpCustomerCommunicationName></inpCustomerCommunicationName>
            <inpCustomerCommunicationData></inpCustomerCommunicationData>
            <selCustomerCommunicationType></selCustomerCommunicationType>
        </entity>
    </entitys>
</script>

<table id="tblCommunicationCustomer_Template" style="display:none">
    <tbody>
    <tr>
            <td><input type="checkbox"/></td>
        <td><input type="text" id="test1" name="test1" value=""/></td>
            <td><input type="text" id="test2" name="test2" value=""/></td>
            <td>
                <select type="select-one" id="sel">
    <option value="0"></option>
    <option value="1">car</option>
    <option value="2">bike</option>
    <option value="3">bus</option>
    <option value="4">cycle</option>
</select>
            </td>
        </tr>
    </tbody>
   ...

CSS

/* Not necessary, just a little bit of CSS to prevent our table from looking abhorrent */
      table {
        background: #000;
      }
      table td
      {
        background: #fff;
      }

JavaScript

$(document).ready(function() {
     // Declare table name (should be changed when implementing in real env)
    sGridName = "tblCommunicationCustomer";
    
    // Get table body to copy to 
    var copyToTable = $('#' + sGridName + ' tbody');
    var clonedRow;

    // Get XML data
    var xmlDataSource = document.getElementById(sGridName + "_system_grid_xmldata").textContent;
    // Parse xml data with jQuery and create jQuery data object
    var xmlDoc = $.parseXML(xmlDataSource);
    var $xml = $(xmlDoc);
    
    // Find all entitys in xmlData
    var $entitys = $($xml).find("entity");
    
    // Loop through each entity
    $entitys.each(function (index, entity) {

        // Create jQuery object for entity      
        var $entity = $(entity);

        // Get the last row in the template table and clone to new row
        var row = $("#tblCommunicationCustomer_Template tr:last");
        clonedRow = row.clone();
        // Get first td (column) of new row
        var nextTdInRow = clonedRow.children("td:first");
        
        // Loop through each entity to get data
        $entity.children().each(function (i, child) {
            // Get the data of the entitys child
            var valueFromXMLEntity = $(child).text();

            // Add values from xml entity for current td (column)
                nextTdInRow.children().each(function() {
                    var elementType = $(this).attr('type');
//                    alert("elementType: " + elementType);
                    if (elementType == "checkbox") {
                    // Handle checkbox
                        if(valueFromXMLEntity == 'true') {
                            $(this).prop('checked', 'checked');
                        }
                    } else if (elementType == "text") {
                    // Handle input of type text
                        $(this).attr('value', valueFromXMLEntity);
                    } else if (elementType == "hidden") {
                    // Handle...