How to create a HTML Table with in Jquery Modal

I am looking to have the Html table with 4 rows with in jquery modal but it is not fitting the corners of Modal.Iam opening the modal when i click on a button. it looks like we have the table inside the modal. How can I overcome that ?

Javascript:

$(document).ready(function(){
    $("#dialog1").dialog({
                autoOpen: false,
                height: 390,
                width :480,
                resizable: false,   
                modal: true
    });
    $("#button1").click(function (){
        $('#dialog1').dialog('open');
        $("#dialog1").dialog( "option", "closeOnEscape", false );
    });
)};

HTML:

<div id="dialog1"  style="display:none">
    <table width ="100%" border = "1" align='center'>
        <tr>
            <td align = 'center'>tesstttt</td>
        </tr> 
        <tr>
            <td>testin gggggg.</td>
        </tr>
        <tr>
            <td align = 'center'><img sr开发者_如何学JAVAc="sp.gif" border="0" align="center" hspace="12"/></td>
        </tr> 
        <tr>
            <td> errors:????</td>
        </tr>
    </table>
</div>

It sounds like the dialog corners are hiding part of the table.

Try adding margin to the table itself, actually.

    .ui-widget {
        font-size: 0.75em;
            }

            #tabs .search-field {
              margin-top: 0.2em;
                margin-bottom: 0.2em;
                line-height: 1em;
            }

            #tabs .search-field .label {
                min-width: 10em;
                text-align: right;
                padding-top: 5px;
                }

            #tabs .search-field .label {
            float: left;
            }       

            #result {
                width: 60%;
                float: left;
                margin-right: 5px;
                }

            #operation {
                width: 37%;
                float: left;
                margin-left: 5px;
                }


            .border {
                border-top-style: dotted; 
                border-width: 1px; 
                padding-bottom: 2px; 
margin-top: 2px;

}

            table {
                border-top-style: dotted;
                border-width: 1px;
                border-collapse: collapse;
            }

            th {
                padding: 3px 3px 3px 3px;
                border-style: dotted;
                border-width: 1px;
                background-color: #D3D3D3;
                }

            td {
            padding: 3px 3px 3px 3px;
                border-style: dotted;
                border-width: 1px;
                vertical-align: top;
                }

            .skip {
                color: gray;
            }

            .edit {
                color: fuchsia;
            }

            .delete-add {
                color: blue;
                }

            .add {
                color: green;
            }

            .delete {
                color: red;
            }

            .propertiestable {
                margin-left: 5px;
                width: 100%;
                }

            .propertiestable a {
                text-decoration: none;
                cursor: pointer;
            }

            #result .buttons {
                text-align: right;
            }

            .buttons a {
                text-decoration: none;
                }

            .buttons a:first-child {
                margin-right: 5px;
                }

        .excerpt {
                margin-top: 10px;   
        }

            .excerpt span {
                background: lightgray;
                border-top: 1px solid black;
                display: block;
                margin-top: 3px;
                padding: 1px;
            }

            td div.property {
                margin: 1px;
                border-top: 1px solid black;
                max-width: 300px;
            }   

                td div.property .name {
                background: yellow;
                margin-right: 2px;
                }

            td div.pagereferences {
                margin-top: 5px;
            }

            td div.pagereferences .title{
                font-weight: bold;
                display: block;
            }

                td div.otherreferences {
                    margin-top: 5px;
                }

                td div.otherreferences .title{
                    font-weight: bold;
                    display: block;
                }

                .nodepath {
                    background: yellow;
                }

    function filter(selector, query) {
query = $.trim(query);
query = query.replace(/ /gi, '|');
$(selector).each(function() {
    ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide() : $(this).show();
});
    }

        function togglePropertyTable(checkbox) {
var flag = $(checkbox).attr('checked');
if(flag) {
    $('<table class="propertiestable ui-widget"/>').appendTo(checkbox.parentNode)
        .append($('<tr/>')
            .append($('<th/>').text('Action'))
            .append($('<th/>').text('Name'))
            .append($('<th/>').text('Type'))
            .append($('<th/>').text('Value'))
            .append($('<th/>')
                    .html('<a onclick="addPropertyRow(this)">+</a>')
            )
        );
}
else {
    $(checkbox.parentNode).find('table.propertiestable').remove();
}
  }

           function toggleNodeTable(checkbox) {
var flag = $(checkbox).attr('checked');
if(flag) {
    $('<div class="combochildnode"/>').appendTo(checkbox.parentNode)
        .append($('<select class="combochildnode"/>')
            .append($('<option value="addchildnode" selected="true"/>').text('Add'))
            .append($('<option value="deletechildnode"/>').text('Delete'))
            .change(function(){
                handleAddRemoveChildNodeChange(this);
            })
        )
        .append($('<input class="combochildnode"/>'));


          function addPropertyRow(anchor) {
var table = anchor.parentNode.parentNode.parentNode.parentNode;
var tr = $('<tr/>').appendTo(table)
    .append($('<td/>')
        .append($('<select name="action"/>')
            .append($('<option value="add-edit"/>').text('Add/Edit'))
            .append($('<option value="delete"/>').text('Delete'))
            .change(function(){
                handlePropertyActionChange(this.value, tr);
            })
        )
    )
    .append($('<td/>').html('<input name="name"/>'))
    .append($('<td/>'))
    .append($('<td/>'))
    .append($('<td/>')
        .append($('<a/>')
            .text('-')
            .click(function(){
                $(this.parentNode.parentNode).remove();
            })
        )
    );

handlePropertyActionChange($(tr).find('td select[name="action"]').val(),tr);
             }

           function handlePropertyActionChange(action, tr) {
var tdpropertytype = $(tr).find('td:eq(2)');
var tdpropertyvalue = $(tr).find('td:eq(3)');

if(action == 'add-edit') {
    var select = $('<select name="type"/>').appendTo(tdpropertytype)
        .append($('<option value="boolean"/>').text('Boolean'))
        .append($('<option value="boolean-arr"/>').text('Boolean[]'))
        .append($('<option value="date"/>').text('Date'))
        .append($('<option value="date-arr"/>').text('Date[]'))
        .append($('<option value="double"/>').text('Double'))
        .append($('<option value="double-arr"/>').text('Double[]'))
        .append($('<option value="long"/>').text('Long'))
        .append($('<option value="long-arr"/>').text('Long[]'))
        .append($('<option value="string"/>').text('String'))
        .append($('<option value="string-arr"/>').text('String[]'))
        .change(function(){
            handlePropertyTypeChange(this.value, tr);
        });

    handlePropertyTypeChange($(select).val(), tr);
}
else if(action == 'delete'){
    $(tdpropertytype).empty();
    $(tdpropertyvalue).empty();
}
       }

        function handlePropertyTypeChange(type, tr) {
var tdpropertyvalue = $(tr).find('td:eq(3)');

if(type.lastIndexOf("-arr") == -1) {
    var count = $(tdpropertyvalue).find('div').length;
    if(count == 0) {
        $('<div/>').appendTo(tdpropertyvalue)
            .append($('<span/>').html('<input name="value"/>'));
    }
    else {
        $(tdpropertyvalue).find('div:eq(0)').find('span:eq(1)').remove();
        $(tdpropertyvalue).find('div:not(:eq(0))').remove();
    }
}
else {
    var firstDiv = $($(tdpropertyvalue).find('div:eq(0)'));
    if($(firstDiv).find('span a').length == 0) {
        $(tdpropertyvalue).find('div:eq(0)')
            .append($('<span/>')
                .append($('<a>+</a>')
                    .click(function(){
                        addArrayProperty(this);
                    })
                )
            );
    }
        }
           }

           function addArrayProperty(anchor) {
var tdpropertyvalue = anchor.parentNode.parentNode.parentNode;
$('<div/>').appendTo(tdpropertyvalue)
    .append($('<span/>').html('<input name="value"/>'))
    .append($('<span/>')
        .append($('<a>-</a>')
            .click(function(){
                $(this.parentNode.parentNode).remove();
            })
        )
    );
       }

      function saveOrDryRun(flag) {
if(validateSaveOrDryRun() == false) return;

var form = $('#search-result-container form');

var URL = $(form).attr('action');
var response = $.ajax({
    type: 'POST',
    url: URL,
    data: buildDryRunReqParam(flag),
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
        handleSaveResult(flag, data, textStatus, jqXHR);
    },
    error: function(xhr, status, error) {
        alert('Error :' + error);
    }
});
      }

      function buildDryRunReqParam(flag) {
var data = {
    "nodes": [],
    "properties": [],
    "chidnodes": [],
    "childnodeproperties": [],
    "workflowpackage": false
};
data['dryrun'] = flag;
data['workflowpackage'] = $('#workflow input[name="createworkflowpkg"]').attr('checked');

$('#result table input[type="checkbox"]').each(function() {
    if(this.checked) {
        data['nodes'].push(this.value);
    }
});

$('#operation div.manage-properties table.propertiestable tr:not(:eq(0))').each(function() {
    var property = {};
    data['properties'].push(property);
    property['action'] = $(this).find('select[name="action"]').val();
    property['name'] = $(this).find('input[name="name"]').val();
    if(property['action'] == 'add-edit') {
        property['type'] = $(this).find('select[name="type"]').val();
        property['value'] = [];
        $(this).find('input[name="value"]').each(function(){
            property['value'].push($(this).val());
        });
    }
});

var childnodeflag = $('#operation div.manage-child-node input[name="manage-child-node"][type="checkbox"]').attr('checked');
if(childnodeflag == true) {
    var childnode = {};
    data['chidnodes'].push(childnode);
    childnode['action'] = $('#operation div.manage-child-node div.combochildnode select.combochildnode').val();
    childnode['name'] = $('#operation div.manage-child-node div.combochildnode input.combochildnode').val();
}

var childnodeproperties = $('#operation input[type="checkbox"][name="chkboxchildnodeproperties"]');
if(childnodeproperties.length != 0) {
    var childnodepropertiesflag = $(childnodeproperties).attr('checked');
    if(childnodepropertiesflag == true) {
        $('#operation div.manage-child-node table.propertiestable tr:not(:eq(0))').each(function() {
            var property = {};
            data['childnodeproperties'].push(property);
            property['action'] = $(this).find('select[name="action"]').val();
            property['name'] = $(this).find('input[name="name"]').val();
            if(property['action'] == 'add-edit') {
                property['type'] = $(this).find('select[name="type"]').val();
                property['value'] = [];
                $(this).find('input[name="value"]').each(function(){
                    property['value'].push($(this).val());
                });
            }
        });
         }
         }

var jsondata = {
    'json' : JSON.stringify(data)
    };

return jsondata;
      }

        function handleSaveResult(dryrunFlag, json, textStatus, jqXHR) {
if(dryrunFlag) {
    $('#save-summary-container').remove();
    var parentDiv = createAccordion($('#accordion-container'), 'save-summary-container', 'Dry Run Summary');        

    var containerDiv = $(parentDiv).find('div.container');

    if(json['status'] == 'failed') {
        $('<div/>').appendTo(containerDiv)
            .text('Dry Run Failed: ' + json['message']);
    }
    else if(json['status'] == 'success') {
        $('<div/>').appendTo(containerDiv)
            .text(json['message']);

        var table = $('<table class="ui-widget" style="width:100%"/>').appendTo(containerDiv);
        $('<tr/>').appendTo(table)
            .append($('<th style="width: 1%"/>').text('Sr#'))
            .append($('<th style="min-width: 45%"/>').text('Node'))
            .append($('<th style="max-width: 55%"/>').text('Operation Summary'));

        $(json['data']).each(function(ctr, curr) {
            var tr = $('<tr/>').appendTo(table)
                .append($('<td/>').text(ctr + 1))
                .append($('<td/>').text(curr['node']))
                .append($('<td/>'));

            var td = $(tr).find('td:last');
            $(curr['operationsummary']).each(function(){
                $('<div class="' + this['operation-status'] + '"/>').appendTo(td)
                    .text(this['operation-remark']);
            });
        });
    }
      }
else {
    $('#save-summary-container').remove();

    var parentDiv = createAccordion($('#accordion-container'), 'save-summary-container', 'Save Summary');
    var containerDiv = $(parentDiv).find('div.container');

    if(json['status'] == 'failed') {
        $('<div/>').appendTo(containerDiv)
            .text('Save Failed: ' + json['message']);
    }
    else if(json['status'] == 'success') {
        $('<div/>').appendTo(containerDiv)
            .text(json['message']);

        var table = $('<table class="ui-widget" style="width:100%"/>').appendTo(containerDiv);
        $('<tr/>').appendTo(table)
            .append($('<th style="width: 1%"/>').text('Sr#'))
            .append($('<th style="min-width: 45%"/>').text('Node'))
            .append($('<th style="max-width: 55%"/>').text('Operation Summary'));

        $(json['data']).each(function(ctr, curr) {
            var tr = $('<tr/>').appendTo(table)
                .append($('<td/>').text(ctr + 1))
                .append($('<td/>').text(curr['node']))
                .append($('<td/>'));

            var td = $(tr).find('td:last');
            $(curr['operationsummary']).each(function(){
                $('<div class="' + this['operation-status'] + '"/>').appendTo(td)
                    .text(this['operation-remark']);
            });
        });
    }
         }
         }

         function validateSaveOrDryRun() {
     var selectedNodeCount = $('#result table input[type="checkbox"]:checked').length;
if(selectedNodeCount == 0) {
    alert("Please select atleast one node to updated.");
    return false;
     }

var optionsselectedcount = $('#operation div.datainput input[type="checkbox"]:checked').length;
if(optionsselectedcount == 0) {
    alert("Nothing to update.");
    return false;
}

var addPropertiesSelected = $('#operation div.datainput input[type="checkbox"]:eq(0)').attr('checked');
var propertiescount = $('#operation div.manage-properties table.propertiestable tr:not(:eq(0))').length;
if(addPropertiesSelected == true && propertiescount == 0) {
    alert('Nothing to update. Add atleast one property.');
    return false;
}

var allPropertiesValid = true;
$('#operation div.manage-properties table.propertiestable tr:not(:eq(0))').each(function() {
    allPropertiesValid = validatePropertyRow(this); 
    return allPropertiesValid;
});

if(allPropertiesValid != true) {
    return false;
}

var childnodeflag = $('#operation div.manage-child-node input[name="manage-child-node"][type="checkbox"]').attr('checked');
if(childnodeflag == true) {
    var childnodename = $('#operation div.manage-child-node div.combochildnode input.combochildnode').val();
    if(isEmpty(childnodename)) {
        alert('Enter child node name');
        $('#operation div.manage-child-node div.combochildnode input.combochildnode').focus();
        return false;
    }

    var addChildNodePropertiesSelected = $('#operation input[type="checkbox"][name="chkboxchildnodeproperties"]').attr('checked');
    var childNodePropertiesCount = $('#operation div.manage-child-node table.propertiestable tr:not(:eq(0))').length;
    if(addChildNodePropertiesSelected == true && childNodePropertiesCount == 0) {
        alert('Add atleast one child node property.');
        return false;
    }

    var allChildNodePropertiesValid = true;
    $('#operation div.manage-child-node table.propertiestable tr:not(:eq(0))').each(function() {
        allChildNodePropertiesValid = validatePropertyRow(this); 
        return allChildNodePropertiesValid;
    });
    if(allChildNodePropertiesValid != true) {
        return false;
    }
}

       return true;
        }

       function validatePropertyRow(tr) {
var allPropertiesValid = true;
var name = $(tr).find('input[name="name"]').val();
var action = $(tr).find('select[name="action"]').val();

if(isEmpty(name)) {
    allPropertiesValid = false;
    alert("Enter Property Name");
    $(tr).find('input[name="name"]').focus();
    return false;
}

if(action == 'add-edit') {
    var allValuesValid = true;
    var type = $(tr).find('select[name="type"]').val();
    $(tr).find('input[name="value"]').each(function(){
        var value = $(this).val();
        if(isEmpty(value)) {
            allValuesValid = false;
            alert("Enter Property Value");
            $(this).focus();
            return false;
        }

        if(type == "boolean" || type == "boolean-arr") {
            if(isValidBoolean(value) == false) {
                allValuesValid = false;
                alert('Enter valid boolean value. e.g true | false');
                $(this).focus();
                return false;
            }
        }
        else if(type == "date" || type == "date-arr") {
            if(isValidDate(value) == false) {
                allValuesValid = false;
                alert('Enter valid date value. Format ("MM/DD/YYYY H24:MM:SS")');
                $(this).focus();
                return false;
            }
        }
        else if(type == "double" || type == "double-arr") {
            if(isValidDouble(value) == false) {
                allValuesValid = false;
                alert('Enter valid double value.');
                $(this).focus();
                return false;
            }
        }
        else if(type == "long" || type == "long-arr") {
            if(isValidLong(value) == false) {
                allValuesValid = false;
                alert('Enter valid long value.');
                $(this).focus();
                return false;
            }
        }
    });

    if(allValuesValid != true) {
        allPropertiesValid = allValuesValid;
        return false;
    }
       }

return allPropertiesValid;
       }

  function handleSearchResult(json, textStatus, jqXHR) {
var div = $('#search-result-container div.container');

var messageDiv = $(div).find('.message');

if(json['status'] == 'success') {
    $(messageDiv).find('span').text(json['message']);
    var data = json['data'];

    if(data.length != 0) {
        var form =$('<form/>').appendTo(div)
            .attr('action', $('#current-page-path').val() + '.save.html');
        var contentDiv = $('<div class="content"/>').appendTo(form);
        var resultDiv = $('<div id="result"/>').appendTo(contentDiv);

        var filterDiv = $('<div/>').appendTo(resultDiv);
        $('<label/>').appendTo(filterDiv).text('Filter: ');
        $('<input type="text" style="width: 60%"/>').appendTo(filterDiv)
            .keyup(function(event) {
                if(event.keyCode == 27 || $(this).val() == '') {
                    $(this).val('');
                    filter('#filterable tbody tr', $(this).val());
                }
                else {
                    filter('#filterable tbody tr', $(this).val());
                }
            });

        var table = $('<table id="filterable" class="ui-widget" style="width: 100%"/>').appendTo(resultDiv);
        var tHead = $('<thead/>').appendTo(table);
        var tBody = $('<tbody/>').appendTo(table);

        // Create Header Row
        $('<tr class="ui-widget-header"/>').appendTo(tHead)
            .append($('<th/>').text('Sr#'))
            .append($('<th style="width:70%"/>').text('Node Path'))
            .append($('<th style="width:25%"/>').text('Properties'))
            .append($('<th/>').text('Select'));

        // Create Data Rows
        $(data).each(function(i, tmp) {
            var tr = $('<tr/>').appendTo(tBody)
                .append($('<td/>').text(i+1))
                .append($('<td/>'))
                .append($('<td/>'))
                .append($('<td/>').html('<input type="checkbox" name="chk-result-nodes" value="' + tmp['path'] + '"/>'));

            var td2 = $(tr).find('td:nth-child(2)');
            if(tmp['excerpt'] != undefined) {
                $('<div/>').appendTo(td2)
                    .html(tmp['path']);
                $('<div class="excerpt"/>').appendTo(td2)
                    .html(tmp['excerpt']);
            }
            else if(tmp['pagereferences'] != undefined || tmp['otherreferences'] != undefined) {
                $('<div class="nodepath"/>').appendTo(td2)
                    .html(tmp['path']);

                if(tmp['pagereferences'] != undefined && tmp['pagereferences'].length != 0) {
                    var pagereferences = $('<div class="pagereferences"/>').appendTo(td2)
                        .append($('<label class="title"/>').text('Page References'));

                    var tlb = $('<table class="ui-widget" width="100%"/>').appendTo(pagereferences);
                    $(tmp['pagereferences']).each(function(p, each){
                        $('<tr/>').appendTo(tlb)
                            .append($('<td/>').text(p+1))
                            .append($('<td/>').text(each));
                    });

                }

                if(tmp['otherreferences'] != undefined && tmp['otherreferences'].length != 0) {
                    var otherreferences = $('<div class="otherreferences"/>').appendTo(td2)
                        .append($('<label class="title"/>').text('Other References'));

                    var tlb = $('<table class="ui-widget" width="100%"/>').appendTo(otherreferences);
                    $(tmp['otherreferences']).each(function(p, each){
                        $('<tr/>').appendTo(tlb)
                            .append($('<td/>').text(p+1))
                            .append($('<td/>').text(each));
                    });

                }
            }
            else {
                $('<div/>').appendTo(td2)
                    .html(tmp['path']);
            }

            var td3 = $(tr).find('td:nth-child(3)');
            $(tmp['properties']).each(function(i, property){
                $('<div class="property"/>').appendTo(td3)
                    .append($('<span class="name">').text(property['name']))
                    .append($('<span class="value">').text(property['value']));
            });

        });

        $('<div class="buttons"/>').insertBefore(table)
            .append($('<a href="#" name="select-all">Select All</a>').click(function(){
                $(table).find('tr:visible input[name="chk-result-nodes"]').attr('checked', true);
            }))
            .append($('<a href="#" name="reset">Reset</a>').click(function(){
                $(table).find('tr:visible input[name="chk-result-nodes"]').attr('checked', false);
            }));

        if($('#allowModification').val() == "false") {
            return;
        }

        var operationDiv = $('<div id="operation"/>').appendTo(contentDiv);
        var dataInputDiv = $('<div class="datainput"/>').appendTo(operationDiv);

        $('<div class="manage-properties">').appendTo(dataInputDiv)
            .append($('<input type="checkbox" onchange="togglePropertyTable(this)"/>'))
            .append($('<span>Add properties to selected node(s).</span>'));

        $('<div class="border"/>').appendTo(dataInputDiv);

        $('<div class="manage-child-node">').appendTo(dataInputDiv)
            .append($('<input name="manage-child-node" type="checkbox" onchange="toggleNodeTable(this)"/>'))
            .append($('<span>Add child node to selected node(s).</span>'));

        $('<div id="workflow"/>').appendTo(dataInputDiv)
            .append($('<input name="createworkflowpkg" type="checkbox"/>'))
            .append($('<label/>').text('Create workflow package for updated nodes.'))

        var buttonDiv = $('<div class="button"/>').appendTo(operationDiv);
        var checkboxdryrun = $('<input type="checkbox" name="dryrun"/>').appendTo(buttonDiv)
            .attr('checked', true);
        $('<label/>').text('Dryrun').appendTo(buttonDiv);
        $('<input type="button" value="Save"/>').appendTo(buttonDiv)
            .click(function(){
                saveOrDryRun($(checkboxdryrun).attr('checked'));
            });
    }
}
else if(json['status'] == 'fail') {
    $(messageDiv).find('span').text('Search Failed: ' + json['message']);
}

}