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

尝试Folowing代码：

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 CODE：

<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 2

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

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

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

但是，如果您要从多个元素（表格中的多列）中检索值，那么这里是一个代码段

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

尝试这样的事情;如果将类放在最后一行的按钮上，则可以从事件中获取列索引。然后表第一行 - ＆gt; col_index是文本框值，第2行 - ＆gt; 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);
});

使用jquery将数据库中的元素值和数据插入textarea

3 个答案: