Question

设置：包含可以操作的数据的网站（CRUD）。
目标：点击添加按钮添加并获取一个屏幕，询问带有3个输入字段的数据。
如何：点击添加按钮 - ＆gt;叠加形式显示3个输入字段 - ＆gt;点击＆＃34;使用数据＆＃34;按钮添加 - ＆gt;数据出现在表格中（新tr）

HTML：

<img id="addbutton" src="./images/addbutton.png" />

<table id="data">
<tr><td>Title</td></tr>
<tr><td>data 1</td><td>data 1</td><td>data 1</td></tr>
<tr><td>data 2</td><td>data 2</td><td>data 2</td></tr>
<tr><td>data 3</td><td>data 3</td><td>data 3</td></tr>
</table>

重叠html：

<input type="text" name="dataField1">
<input type="text" name="dataField2">
<input type="text" name="dataField3">

问题：我怎么能用JQuery做到这一点？

Answer 1

试试这种方式

脚本

$(document).on('click', '#addbutton', function () {
    $('#fpwd').bPopup({
        closeClass: 'b-close',
        speed: 450,
        transition: 'slideDown'
    });
});

function tab_data() {
    var x = $('#val1').val();
    var y = $('#val2').val();
    var z = $('#val3').val();
    if (x != null && y != null && z != null) {
        $('.b-close').click()
        var html = "<tr><td>" + x + "</td><td>" + y + "</td><td>" + z + "</td></tr>";
        $("#data").append(html);
        $('.reg_form')[0].reset();
    } else {
        alert("You must fill all the inputs")
    }
}

DEMO

我使用了这个插件http://dinbror.dk/bpopup/

Answer 2

在使用jQuery时，此解决方案并不是连接javascript事件/函数的最佳实践，但它应该很好地说明您需要的机制：

显示对话框的功能：

function showModalDialog() {

    //Declare an overlay to fade out the primary view.
    var overlay = $('<div id="overlay" style="position:fixed;overflow:hidden; height: 100%; width: 100%;background-color: rgba(0,0,0,0.5);z-index: 1;" />');

    //Declare a dialog to hold the input fields.
    var dialog = $('<div id="modal" style="position:absolute;top: 50%; left: 50%;-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:350px; z-index: 2;background-color: white;" />');

    //Add content to the dialog.
    dialog.append('<h3>Create</h3>');
    dialog.append('<label style="display: block;">Data field 1: <input type="text" id="dataField1" /></label>');
    dialog.append('<label style="display: block;">Data field 2: <input type="text" id="dataField2" /></label>');
    dialog.append('<label style="display: block;">Data field 3: <input type="text" id="dataField3" /></label>');
    dialog.append('<input type="button" id="btnCreate" value="use data" onclick="useData();" />');

    //Show the overlay and the dialog.
    $('html').prepend(overlay);
    $('html').prepend(dialog);
}

获取值并将其添加到表中的函数：

function useData() {

    //Get the values.
    var value1 = $('#dataField1').val();
    var value2 = $('#dataField2').val();
    var value3 = $('#dataField3').val();

    //Append the new values to the table.
    $('#data').append($('<tr />')
        .append($('<td />').html(value1))
        .append($('<td />').html(value2))
        .append($('<td />').html(value3))
        );

    //Remove the overlay and dialog.
    $('#overlay').remove();
    $('#modal').remove();
}

JsFiddle演示代码，但已更新以执行$(document).ready()中事件的连接：

http://jsfiddle.net/AUTra/

Answer 3

$('#data').append("<tr><td>"+$('[name=dataField1]').val()+"</td><td>"+$('[name=dataField2]').val()+"</td><td>"+$('[name=dataField3]').val()+"</td></tr>")

或

var field1 = $('[name=dataField1]').val();
var field2 = $('[name=dataField2]').val();
var field3 = $('[name=dataField3]').val();
var html = "<tr><td>"+field1+"</td><td>"+field2+"</td><td>"+field3+"</td></tr>";


$("#data").append(html);

Jquery覆盖数据输入

3 个答案: