jquery弹出框获取值并显示在表格单元格中

Question

你能告诉我如何创建一个弹出框吗？

html是

<tr>
    <td><strong>Involved</strong></td>
    <td><button>Add data<button></td>
</tr>
<tr id="list"  class="ir-shade">
    <td><span class="delete_icon">x</span>Attila Hun</td>            
</tr> 

在 html 中，我创建了一个表格，并在其中一个名为 "add data" 的按钮中创建了表格。已创建。按下该按钮时，会出现一个带有标题的弹出框和一个带有文本区域和 "ok" button 的关闭按钮。将打开。当我单击 ok button输入的数据应显示在 <td> 中,即"Attila Hun"在 html 中。

我学习了 jQuery 教程。我发布这个是因为我无法从 jquery 论坛复制它。请帮助我这样做。

jquery 是

jQuery(function($) {  

     $("a.topopup").click(function() {
            loading(); 
            setTimeout(function(){ 
                loadPopup();  
            }, 500); 
      return false;
      });

      function loading() {
         $("div").show();  
      }

     var popupStatus = 0; 

     function loadPopup() { 
        if(popupStatus == 0) { 
            closeloading(); 
            $("#toPopup").show();        
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { 
            $("#toPopup").hide("normal");  
            $("#backgroundPopup").hide("normal");  
            popupStatus = 0;  
        }
    }     

$("#save").on("click",function(){
    $("a.topopup").after("<b/>" + $("#textval").val());
    $("#toPopup").hide();
});    
});

CSS

 #backgroundPopup { 

    position: fixed;    
    display:none;    
    height:100%;    
    width:100%;    
}

#toPopup { 
    background: none repeat scroll 0 0 #FFFFFF;    
    border: 4px solid #ccc;    
    display: none;    
    font-size: 14px;    
    left: 80%;    
    margin-left: -402px;    
    position: fixed;    
    top: 50%;    
    width: 270px;
    height:70px;
}

这是我试过的代码，我没有得到预期的输出。

提前致谢。

Answer 1

作为一般方法，以下工作:

$('tbody button.add').click(function (e) {
    // stops any default actions the button might have:
    e.preventDefault();
    // finds the 'Attila the Hun' text
    var newText = $(this)
    // traversing to the nearest 'tr' element
    .closest('tr')
    // moves to the next sibling, finds the 'td', retrieves the contents
    .next().find('td').contents()
    // filters out any child nodes that are not textNodes
    .filter(function () {
        // by returning only those nodes that *are* textNodes
        return this.nodeType == 3;
        // retrieves the text
    }).text();

    // updates the text of the '#output' element (whatever this might be)
    $('#output').text(function (i, t) {
        /* checks the user wants to add that new data/text.
           If so, it returns the old text (t) + newText;
           if not it returns only the old text */
        return confirm('Add new data?') ? (t + ' ' + newText) : t;
    });
});

JS Fiddle demo .

要显式显示新数据(在确认对话框中)，只需将 newText 变量连接到字符串中:

return confirm('Add new data: "' + newText + '"') ? (t + ' ' + newText) : t;

JS Fiddle demo .

引用资料:

• > click() .
• > closest() .
• > contents() .
• > event.preventDefault .
• > filter() .
• > find() .
• > next() .
• > text() .