Jquery覆盖数据输入

Question

• 设置：网站的数据可以被操纵（CRUD）。
• 目标：单击添加按钮添加并获得一个屏幕，用3个输入字段询问数据。
• 如何：点击添加按钮 - >叠加的形式出现3个输入框 - >点击“使用数据”按钮添加 - >数据显示在表（新潮流）

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

该解决方案是使用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 2

$('#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); 

Answer 3

尝试这种方式

脚本

$(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/