插入元素值和数据从数据库到textarea与jquery

Question

我想知道如何插入一个文本框的值和我从数据库中检索到的值到一个textarea，单击按钮后？

我有一张表，第一行是所有可以输入数字的文本框。第二行是我从数据库中检索的数据。最后一行是一个添加按钮。

如何将文本框和数据上的值附加到textarea上单击按钮？

编辑：

只是为了说清楚。

我在每一行有多个列。 每列都有一个文本框。

我想将文本框的值以及从数据库检索到的数据的值添加到textarea。

回答

谢谢你，先生artm的答案

，谁想要知道这里是：demo

$('.buttonAdd').click(function(){ 
    var td = $(this).parent(); 
    var tr = td.parent(); 
    var rowIndex = tr.parent().children().index(tr); 

    var textBoxValue = $("#example tbody tr:eq(" + rowIndex + ") td:eq(0) input").val(); 
    var dbValue = $("#example tbody tr:eq(" + rowIndex + ") td:eq(1) span").text(); 
alert(textBoxValue + " " + dbValue); 

var text = textBoxValue + dbValue 
$('textarea').val($('textarea').val() + " " + text +"\n"); 

}）;

Answer 1

尝试是这样的;如果你把一个类放在最后一行的按钮上，那么你可以从事件中获得列索引。然后表第一行 - > col_index是文本框的值，第二行 - > col_index是来自db的值。

$('.buttonAdd').click(function(){ 
    //this.parent = 'td' 
    var td = $(this).parent(); 
    var colIndex = td.parent().children().index(td); 
    var textBoxValue = $("#tableID tr:eq(0) td:eq(" + colIndex + ")").val(); 
    var dbValue = $("#tableID tr:eq(1) td:eq(" + colIndex + ")").val(); 
}); 

更新：

http://jsfiddle.net/rsddffx1/14/

$('.buttonAdd').click(function(){ 
    var td = $(this).parent(); 
    var tr = td.parent(); 
    var rowIndex = tr.parent().children().index(tr); 

    var textBoxValue = $("#example tbody tr:eq(" + rowIndex + ") td:eq(0) input").val(); 
    var dbValue = $("#example tbody tr:eq(" + rowIndex + ") td:eq(1) span").text(); 
    alert(textBoxValue + " " + dbValue); 
}); 

Answer 2

尝试如下因素代码：

jQuery代码：

var fromtextbox= $('#textbox').val(); //from text box 
var fromdb="hello"; //"<?php echo $fromdb;?>"; from database 
var finaltext=fromtextbox + fromdb; 

$("#btn").click(function(){ 
    $('#txtarea').val(finaltext); 
    }); 

$("#btn1").click(function(){ 
    var textval= $('#txtarea').val(); 
    alert(textval); 
    }); 

HTML代码：

<input id="textbox" type="text" value="this is text box"/> 

<textarea id="txtarea"></textarea> 
<button id="btn">click on me</button> 
<button id="btn1">get data from me</button> 

http://jsfiddle.net/rrv46rda/1/

Answer 3

这应该做，请确保您指定了正确的选择。假设你只从一个元素/列检索值...

var v1 = $('{your_input_selector}').val(); 
var v2 = $('{your_table_cell_selector}').html(); 

$('{your_textarea_selector}').val(v1 + v2); 

但是，如果从一个以上的元素（表中的多个列）检索值，这里的代码片段

$(function() { 
 

 
    var v1 = ''; 
 
    var v2 = ''; 
 

 
    $('input[type=button]').click(function() { 
 

 
    $('td input[type=text]').each(function() { 
 
     v1 = v1 + $(this).val(); 
 
    }); 
 

 
    $('tr:eq(1) td:eq').each(function() { 
 
     v2 = v2 + $(this).html(); 
 
    }); 
 

 
    $('textarea').val(v1 + v2); 
 
    }); 
 
});

body { 
 
    font-family: Arial 
 
} 
 
table, 
 
td { 
 
    border: 1px solid #ddd; 
 
    border-collapse: collapse 
 
} 
 
table td { 
 
    padding: 5px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 

 
<table cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="Value 1" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="Value 2" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="Value 3" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data 1</td> 
 
    <td>Data 2</td> 
 
    <td>Data 3</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3"> 
 
     <input type="button" value="Add Data" /> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<br/> 
 
<br/> 
 
<textarea></textarea>