Develop Reference

Whatever item in a table is clicked, put that value on a hidden input

I need whatever item clicked on a table to be captured and putted in a hidden input.
This is as far as I got:
var $rows = $('#table tbody tr');
$('#search').keyup(function() {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
$('td').click(function() {
var txt = $('td:first-child').text();
$('#tipo').val(txt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span class="input-group-addon" id="rotulo">Filtrar:</span>
<input type="text" class="form-control" placeholder="" aria-describedby="rotulo" id="search">
</div>
<table class="table" id="table">
<tr>
<td>1st Value</td>
</tr>
<tr>
<td>2nd Value </td>
</tr>
<tr>
<td>3rd Value </td>
</tr>
</table>
<input type="text" id="tipo" value="">
The problem is, whatever value I click, many items in the table are selected, even when this first item is hidden.
Jquery is being used.

td:first-child is selecting the first child td, that's why you are always getting the first element.
The clicked element text can be retrieved by using $(this).text()

You can also do the following:
$('td').click(function() {
var txt = $('.table').find('td:visible:first').text();
$('#tipo').val(txt);
});
It will find the first visible element in the table and outputs its text.
Working fiddle here.

jQuery remove row with matching file name as hidden

I have a markup like this
<table id="data">
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.doc">
</td>
<td><input type="text" value="Test 1"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file1.docx">
</td>
<td><input type="text" value="Test 2"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.pdf">
</td>
<td><input type="text" value="Test 3"></td>
</tr>
</table>
Remove File
In that markup you can see I have file name as hidden fields and under the table I have a remove file tag. So the thing is like this when I will click on the remove file then it will remove that entire row(tr tag) inside where the filename
file.doc is present. So for that I have made my js like this
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
var FileName = 'file.doc';
var GetRowVal = $('table#data td #file-name').val();
if(GetRowVal == FileName ) {
var Parent = $(GetRowVal).parent().remove();
}
else {
console.log(' error');
}
});
});
</script>
But it is not removing the row. So can someone kindly tell me whats the issue here? Any help and suggestions will be really apprecaible. Thanks

There are duplicate id's in your Html,just correct that issue and try below answer :
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
e.preventDefault();
var FileName = 'file.doc';
$('input[type="hidden"]').each(function(){
if( $(this).val() == FileName )
{
$(this).closest('tr').remove();
}
});
});
});
</script>

Following code return Array of Jquery Object.
Then function .val() cannot have meaning.
$('table#data td #file-name');

You have two probles in this code:
first : Ids are not unique.
second:
var GetRowVal = $('table#data td #file-name').val();
will hold only value eg. file.doc
so you can't later
remove the object in this line:
var Parent = $(GetRowVal).parent().remove();
so to repair it first change id to class like here:
<input type="hidden" class="file-name" value="file.doc">
and later You can modify your code:
$(document).ready(function() {
$('#remove').click(function(e) {
var GetRowVal = $(".file-name[value='file.doc']");
$(GetRowVal).parent().parent().remove();
});
});
Here jsfiddle

jQuery Find all rows that checked

I have a table with a checkbox .
I need to know which table rows was checked,
after clicking the Update button.
<div id='ggg' style="position:absolute; bottom:0px" id=>
<table class="display" id="poll">
<th>Polling</th>
<th>rrd</th>
<tr>
<td>ping</td>
<td>10.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked"/>
</td>
</tr>
<tr>
<td>snmp</td>
<td>11.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
</tr>
</table>
<form>
<input type='button' id='update' value='update'>
</form>
</div>

Try this
$('#update').on('click',function(){
$('#poll').find('input:checked').closest('tr').css('background','green');
});
DEMO

You can use :checked selector to get checked checkbox along with .closest(tr) to get row. Try this:
checkedrows = $('input:checked').closest('tr');

Try this
$("#update").click(function () {
$('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
Demo
Edit
$("#update").click(function () {
$("#poll").find('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});

You can use like this:
if you want to highlight to tr:
$('#update').on('click',function(){
$(':checked').parents('tr').css('background','#ff0');
});
if you want to highlight to td:
$('#update').on('click',function(){
$(':checked').parent().css('background','#ff0');
});

$('#update').click(function() {
var checkboxes = $('#poll').find('input:checked').closest('tr');
// this will give you which table rows was checked
});

Add rows to a html table from a textbox value

I want to copy the first row into the same table as many times as you type in, in a textbox.
<table id='table1'>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr id="row">
<td>1</td><td>2</td><td>3</td>
</tr>
<table>
<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="text" />
<script>
function showRow() {
var header = Array();
$("#row").each(function (i) {
header[i] = $(this).text();
})
alert(header);
}
</script>
So I have created an array of the first row that alerts when you click the button.
An example of my question:
If i type 5 in the textbox and click on the button the table should look like this:
ABC
123
123
123
123
123
Is this possible?

I've made the class row rather than the id, so that we can target it (clone() would prevent duplicate ids anyway.)
You can just store the row as a jQuery object and then use a for() loop to clone that object and append it. Use the value entered in the textbox within your loop:
var $tbl = $('#table1'), origRow = $tbl.find('.row').first();
$('#Button1').on('click', function(){
var num = $('#Text1').val();
$tbl.find('.row').remove();
for(i=0; i<num; i++){
var newRow = origRow.clone();
$tbl.append(newRow);
}
});
JSFiddle
I wasn't sure whether you would want the table to empty each time or just add the rows on to the end. If you want the rows to be added to the end, just remove the $tbl.find('.row').remove(); line.

Try thisLink
<table id='table1'>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr class="row">
<td>1</td><td>2</td><td>3</td>
</tr>
<table>
<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="number" />
$(document).ready(function () {
$('#Button1').click(function(){
var num = $('input[id="Text1"]').val();
alert(num);
for(var i=0;i<num;i++){
$('table[id="table1"]').append(' <tr class="row"><td>1</td><td>2</td><td>3</td></tr>');
}
});
});

Ofc it is, just parse the textbox val() or value as int and to a for() loop to that number

Using jquery there is a lot of ways to do it. Look at these jQuery functions :
clone()
appendTo()
insertAfter()

You can try this one:
Logic is simple: Get the count from textbox, create row count no of times and append that row after last row in table. $('#row').html() will give inner element of first row.
<script>
function showRow() {
var i, num = $('#Text1').val();
for(i=0; i<num; i++){
$('#table1 > tbody:last').append('<tr id=row'+i+1+'>'+$('#row').html()+'</tr>');
}
}
</script>
DEMO Link

LIVE DEMO
Try this:
Change your row to class.
HTML:
<table id='table1'>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr class="row">
<td>1</td><td>2</td><td>3</td>
</tr>
<table>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
JQUERY:
$('#Button1').on('click',function(e) {
limit = $("#Text1").val();
for(i=0;i<parseInt(limit);i++) {
strText = $(".row").first().clone();
strText.appendTo("#table1");
}
});

apply values of inputs to all its td innerhtml

is it possible to change the innerhtml of all the td when it has the input inside, i mean to take the input's value and apply it to it's td innerhtml, for example, here's the table and its input inside:
<table>
<tr>
<td><input value="test" /></td>
<td>123</td>
</tr>
</table>
to change it smth into this:
<table>
<tr>
<td>test</td>
<td>123</td>
</tr>
</table>
for all of the td and input values without applying id's and classes?! please pay attention that td innerhtml didnt change :) thank you all for the help! ;)

That's pretty easy.
Name your table first (to find it easily).
<table id="the_table">
<tr>
<td><input value="test" /></td>
</tr>
</table>
Then you can do this:
$('#the_table td input[type="text"]').each(function() {
var val = $(this).val();
$(this).parent('td').html(val);
});
Live demo.
Explanation:
find all inputs that are within <td> that are in this certain table.
for each input:
2.1 retrieve value from the input
2.2 find first parent of the input that is a <td> tag and set its innerHTML to that value

Yes, you can do it like this:
$('table td:has(:input:only-child)').each(function () {
$(this).html($(':input', this).val());
});
It assumes there only is an input in the td. If that is not the case, then remove :only-child.
Explanation of table td:has(:input:only-child)
It says, take any td within a table, which has an input as the only child.
You can test it here: http://jsfiddle.net/eydtw/
Update: take the input which is not hidden.
$('table td:has(input[type!="hidden"])').each(function () {
$(this).html($('input[type!="hidden"]', this).val());
});
http://jsfiddle.net/eydtw/1/
or: take the input which is text.
$('table td:has(input:text)').each(function () {
$(this).html($('input:text', this).val());
});
http://jsfiddle.net/eydtw/3/

$.each($('table td'),function(){
if($(this).children().length !=0)
{
var temp = $($(this).children()[0]).val();
$(this).html(temp);
}
})