合并并合并两个javascript和jquery作为一个

Question

我正在尝试合并两个不同的代码，并使它们作为一个一起工作
第一个用于从sqlite加载所有数据，并保存edit delete和
第二个用来使它们看起来像是一个gridview，其中标签在前端可见，文本框被隐藏，当单击所选行时，标签被隐藏，文本框可见以编辑所选行并打印按下按钮后，数据将打印在sapn上，随后使用sapan数据更新sqlite。

但是当第二个js独立运行时，它们不能正常工作

示例：1 Sqlite插入数据
示例：2个HTML表格以表格形式显示

的HTML

 <body onload="loadall();">
        <input type="hidden" id="id" />First name:
        <input type="text" id="firstName" />
        <br/>Last name:
        <input type="text" id="lastName" />
        <br/>Phone:
        <input type="text" id="phone" />
        <br/>
        <button class="reset">Reset Form</button>
        <button class="update">Update</button>
        <button class="insert">Insert</button>
        <button class="drop">Drop Table</button>
        <table id="results" border="1px" cellspacing="1" width="100%" id="results"></table>
        <input id="printdata" type="button" value="printdata" />
        <div class="showresult">1: <span></span>
        </div>
        <div class="showresult">2: <span></span>
        </div>
        <div class="showresult">3: <span></span>
        </div>
        <div class="showresult">4: <span></span>
        </div>
        <div class="showresult">5: <span></span>
        </div>
    </body>

JS

第一：

function loadall() {
    var results = $('#results')[0];
    var id = $('#id')[0];
    var firstName = $('#firstName')[0];
    var lastName = $('#lastName')[0];
    var phone = $('#phone')[0];
    var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)";
    var selectAllStatement = "SELECT * FROM Contacts";
    var insertStatement = "INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)";
    var updateStatement = "UPDATE Contacts SET firstName = ?, lastName = ?, phone = ? WHERE id = ?";
    var deleteStatement = "DELETE FROM Contacts WHERE id=?";
    var dropStatement = "DROP TABLE Contacts";

    var db = openDatabase("AddressBook", "1.0", "Address Book", 200000);
    var dataset;
    createTable();

    function onError(tx, error) {
        alert(error.message);
    }

    function showRecords() {
        results.innerHTML = '';
        db.transaction(function (tx) {
            tx.executeSql(selectAllStatement, [], function (tx, result) {
                dataset = result.rows;
                for (var i = 0, item = null; i < dataset.length; i++) {
                    item = dataset.item(i);
                    $('#results').append('<tr><td><lable>' + item['lastName'] + '</lable><input type="text" value="' + item['lastName'] + '"></input> </td>, <td><lable>' + item['firstName'] + '</lable><input type="text" value="' + item['firstName'] + '"></input></td></tr>');
                }
            });
        });
    }

    function createTable() {
        db.transaction(function (tx) {
            tx.executeSql(createStatement, [], showRecords, onError);
        });
    }

    function insertRecord() {
        db.transaction(function (tx) {
            tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
        });
    }

    function loadRecord(i) {
        var item = dataset.item(i);
        firstName.value = item['firstName'];
        lastName.value = item['lastName'];
        phone.value = item['phone'];
        id.value = item['id'];
    }

    function updateRecord() {
        db.transaction(function (tx) {
            tx.executeSql(updateStatement, [firstName.value, lastName.value, phone.value, id.value], loadAndReset, onError);
        });
    }

    function deleteRecord(id) {
        db.transaction(function (tx) {
            tx.executeSql(deleteStatement, [id], showRecords, onError);
        });
        resetForm();
    }

    function dropTable() {
        db.transaction(function (tx) {
            tx.executeSql(dropStatement, [], showRecords, onError);
        });
        resetForm();
    }

    function loadAndReset() {
        resetForm();
        showRecords();
    }

    function resetForm() {
        firstName.value = '';
        lastName.value = '';
        phone.value = '';
        id.value = '';
    }

    $('.reset').on('click', resetForm);
    $('.update').on('click', updateRecord);
    $('.insert').on('click', insertRecord);
    $('.drop').on('click', dropTable);

    loadafter();
}

第二：

function loadafter() 
    $('#results input').hide();
    $('#printdata').fadeTo(0, 0);

    // This shows or hides the button deppending on the inputs
    $('#results tr').on('change keyup click', function () {
        var text = '';
        $('input', this).each(function () {
            text += $(this).val();
        });

        if (text != '') {
            $('#printdata').fadeTo(0, 100);
        } else {
            $('#printdata').fadeTo(0, 0);
        }
    });

    $('#results tr').on('click', function (e) {
        if ($(e.target).is("input") || $(e.target).is("th")) {
            return;

        } else if ($(this).hasClass('selected')) {

            $(this).toggleClass('selected');
            $('input', this).toggle();
            $('label', this).toggle();
        } else {

            $(".my-textbox").focus()
            $('tr.selected input').hide();
            $('tr.selected label').toggle();
            $('tr.selected').toggleClass('selected');
            $(this).toggleClass('selected');
            $('label', this).toggle();
            $('input', this).toggle();
        }
    });

    $('#printdata').click(function () {
        $('.showresult').each(function (index) {
            $('span', this).html('');
            $('span', this).html($('#results .selected input').eq(index).val());
        });
    });
}

Answer 1

在第二个js中，您拥有了所有事件处理程序，并且在我看来，您想要在事件出现在DOM中时绑定它们。

因此，在这种情况下，需要委派事件。 您可以委派给最接近的父母，在您的情况下是#results ：

您可以像第一个js一样放置此函数：

function loadall() {
    // all the methods 
    // loadafter(); <======you can remove this now.
}

$(function(){
    //hide these with css 
    //$('#results input').hide();
    //$('#printdata').fadeTo(0, 0);

    // This shows or hides the button deppending on the inputs
    $('#results').on('change keyup click', 'tr', function () {
        var text = '';
        $('input', this).each(function () {
            text += $(this).val();
        });

        if (text != '') {
            $('#printdata').fadeTo(0, 100);
        } else {
            $('#printdata').fadeTo(0, 0);
        }
    }).on('click', 'tr', function (e) {
        if ($(e.target).is("input") || $(e.target).is("th")) {
            return;

        } else if ($(this).hasClass('selected')) {

            $(this).toggleClass('selected');
            $('input', this).toggle();
            $('label', this).toggle();
        } else {

            $(".my-textbox").focus()
            $('tr.selected input').hide();
            $('tr.selected label').toggle();
            $('tr.selected').toggleClass('selected');
            $(this).toggleClass('selected');
            $('label', this).toggle();
            $('input', this).toggle();
        }
    }).on('click', '#printdata', function () {
        $('.showresult').each(function (index) {
            $('span', this).html('');
            $('span', this).html($('#results .selected input').eq(index).val());
        });
    });
});

可以用CSS编写此代码以进行隐藏：

$('#results input').hide();
$('#printdata').fadeTo(0, 0);

#results input, #printdata{ display:none; }

如果希望在fadingOut时进行一些动画处理，那么您可能会喜欢使用css3功能。

合并并合并两个javascript和jquery作为一个

问题描述

1 个解决方案

解决方案1
0 2015-08-17 10:12:22

合并并合并两个javascript和jquery作为一个

问题描述

1 个解决方案

解决方案1 0 2015-08-17 10:12:22

解决方案1
0 2015-08-17 10:12:22