Develop Reference

select input in first td when second td contains word

I have a table with attributes where every tr id has an attribute_id.
each tr contains 6 td's whereas the first td includes an input select box.
I am trying to automate the process of selecting input select boxes when the third td contains a specific word. I tried do this with jQuery but I cant get it work. I could not get the two for eaches work since I have attributes containing all different id's.
My current code looks as follows:
var id = 1;
while(id != 10000){
jQuery('#attribute_ " + id + " > tbody > tr').each(function(index, value) {
jQuery('#+"+id+" > tbody > tr').each(function(index, value) {
$('td:contains("metal")', td[1].select());
});
});
}
my html code:
<tr class="combination loaded" id="attribute_7892" data="7892" data-index="7892" style="display:
table-row;">
<td width="1%">
//select this when contains metal
<input class="js-combination" type="checkbox" data-id="7892" data-index="7892">
</td>
<td class="img"><img src="http://image" class="img-responsive"></td>
//contains metal:
<td>Chain - plastic, left - right, skin - metal silver - V6, color - dark/gray</td>
<td class="attribute-price">5.00</td>
</tr>

The basic process would be like this:
Loop through each tr
Check if the tr has an id matching 'attribute_[number]'
Check if the 3rd td of that tr contains the word 'metal'
Set checked to true if so, otherwise set to false.
Here is an example:
var search = 'metal';
var rows = $('tr.combination.loaded');
rows.each(function(index, value) {
if (/(attribute\_)(\d+)/g.test(value.id)) {
$(this).children(0).children(0).attr('checked', ($(this).children(2).text().indexOf(search) !== -1));
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="combination loaded" id="attribute_7892" data="7892" data-index="7892" style="display:
table-row;">
<td width="1%">
//select this when contains metal
<input class="js-combination" type="checkbox" data-id="7892" data-index="7892">
</td>
<td class="img"><img src="http://image" class="img-responsive"></td>
//contains metal:
<td>Chain - plastic, left - right, skin - metal silver - V6, color - dark/gray</td>
<td class="attribute-price">5.00</td>
</tr>
</table>

Change name of input within specific table row

I'm using a function which I've adapted to clone table rows when a certain button is clicked (see this fiddle), and assign the new row an incremented ID (i.e. table-rows-1 to table-rows-2). After creating a new row, I want a function I'm making to find an input in a td in this row and change its name from input-text-1 to input-text-2. I'm not very confident with Javascript, and am having trouble accessing the input element within the row. Heres an example:
<table>
<tbody>
<tr class="modal-rows" id="table-rows-1">
<td>
<input type="text" class="input-text" name="input-text-1">
</td>
</tr>
<tr class="modal-rows" id="table-rows-2"> <<< DUPLICATED ROW WITH INCREMENT ID
<td>
<input type="text" class="input-text" name="input-text-1">
</td>
</tr>
</tbody>
</table>
How can I access the inner inputs of this table in order to change their name? Heres what I've tried:
var rowNum = document.getElementsByClassName("modal-rows").length
$('#table-rows-' + rowNum + ' .input-text').attr('name', 'input-text-' + rowNum);
$('#table-rows-' + rowNum).find('.input-text').attr('name', 'input-text-' + rowNum);
$('#table-rows-' + rowNum).children('.input-text').attr('name', 'input-text-' + rowNum);
Can anyone let me know where I'm going wrong?

You can use below code inside your duplicate function:
clone.children[0].setAttribute('name', 'input-text'+ ++i)

How to set index variables in filters and selectors jquery

I have the following row structure that serves as a template to clone it and add it to a table each time a user presses an "Add" button, This template is hidden:
<tr class="plantilla">
<td>
<select class="cmb_arboles" id="cmb_arboles" name="arboles[]">
</select>
</td>
<td>
<input type="text" id="txttoneladas" name="txttoneladas[]"/>
</td>
<td>
<input type="text" id="txtprecio" name="txtprecio[]"/>
</td>
<td>
<select id="cmb_destino" name="destino[]">
</select>
</td>
<td class="eliminar_fila">
Eliminar
</td>
</tr>
When the "add" button is pressed, invokes:
$("#agregar").click(function()
{
nid++;
$("#plantilla tbody tr:eq(0)").clone().attr("id",nid).appendTo("#plantilla tbody");
$("#plantilla tbody tr:eq(nid)").find("td:eq(0)").find("select").attr("id","cmb_arboles_"+nid);
});
The first line, generates the sequence of the row number. The second line clones the entire template as a new row in the table and adds an id = nid to the .
The third line, accesses the row and looks for the select to add the nid sequential to the select id, but this does not work. When doing several tests, I conclude that the problem is that "tr: eq (nid)" does not accept the nid as variable, because when changing the nid by a specific integer, for example 1, it works, adding id to select. The question here is how to put the nid as a parameter in the: eq () so that it works correctly and do what I have explained ????
The same situation happens in the following line of code:
$(document).on('change', '.cmb_arboles', function () {
var $select = $(this);
var $row = $select.closest('tr');
var idd = $row.attr('id');
var valor=$("#tabla tbody tr[id=idd]").find("td:eq(0)").find("select").val();
});
Of lines 1 to 3, you get the number of the row in which you have selected in the select component.
The last line gets the value of the select that was selected, with the information of the row number where the selection was made, but this does not work. When doing several tests, I conclude that the problem is in "tr [id = idd]", which does not correctly process the variable "idd". I made the test of changing the idd by a specific integer, for example 1 and then I generate a new line in the table with id = 1 and the line of code works correctly, returning the option that was selected in the select element.
With these two examples, I want to check if someone can tell me how to place the parameters I mentioned in the two cases, so that the functionality is executed correctly and does what is expected.
I will be enormously grateful.

the issue is you have to give
("#plantilla tbody tr:eq(nid)" as (("#plantilla tbody tr:eq('"+nid+"')"
I have created a fiddle. check it out. I didn't use jquery for the same.
<style>
#template {
display: none;
}
</style>
<table><tbody id="template">
<tr class="plantilla">
<td>
<select class="cmb_arboles" id="cmb_arboles" name="arboles[]">
</select>
</td>
<td>
<input type="text" id="txttoneladas" name="txttoneladas[]" />
</td>
<td>
<input type="text" id="txtprecio" name="txtprecio[]" />
</td>
<td>
<select id="cmb_destino" name="destino[]">
</select>
</td>
<td class="eliminar_fila">Eliminar</td>
</tr></tbody>
</table>
<input type="button" id="agregar" value="Add">
<table>
<tbody id="plantilla"></tbody>
</table>
<script>
var nid = -1;
document.getElementById('agregar').onclick = function(){
var table = document.getElementById('plantilla');
var newRow = document.getElementById('template').innerHTML;
nid++;
newRow = newRow.replace('id="cmb_arboles"', 'id="cmb_arboles_'+nid+'"');
newRow.replace('id="cmb_arboles"', 'id="cmb_arboles_'+nid+'"');
table.innerHTML += newRow;
}
</script>
https://jsfiddle.net/nugee3s6/

You are hard coding the id value in $("#tabla tbody tr[id=idd]") not using the variable above it
If you wanted to use the variable it would be:
$("#tabla tbody tr[id=" +idd +"]")
But it makes no sense to use the ID to search again for the same row since you already have that row element as $row
So change to:
$(document).on('change', '.cmb_arboles', function () {
var $select = $(this);
var $row = $select.closest('tr');
var valor=$row.find("td:eq(0) select").val();
});
Then don't worry about using ID's, you don't need them

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");
}
});

why is my jquery selecting all text values

So I want to be able to fetch a number from a table cell and multiply it by an input on focusout, however the selector is grabbing all the table cells with the name front in the front. here is the code:
jquery
$(document).ready(function(){
$(".percent").focusout(function(){
var val2 = $(this).val();
if (val2==="") {
val2=0;
}
var crew2 = $(this).attr("name"),
front = $(".front, td[name='front"+crew2+"']").text();
console.log(crew2);
console.log(front);
});
});
html:
<tr>
<td class='front' name='frontI210'>$176.00</td>
<td><input type='text' class='percent' name='I210' style='' size='4' /></td>
<td>=</td>
<td class='total' id='I210'></td>
</tr>
<tr>
<td class='front' name='frontI250'>$225.00</td>
<td><input type='text' class='percent' name='I250' style='' size='4' /></td>
<td>=</td>
<td class='total' id='I250'></td>
</tr>
and console.log(front) is returning all the text of fronti210 and fronti250 as such:
$176.00$225.00
I want to only receive the information from the table cell that matches the input field name i just finished with, how do i do that?

$(".front, td[name='front"+crew2+"']") searchers for all elements with class front as well as all td elements with the name frontXXX. The comma is the multiple selector [docs].
Either only search for td elements with that name:
var front = $("td[name='front"+crew2+"']").text();
or use DOM traversal:
var front = $(this).closest('tr').children('.front').text();

$(".front, td[name='front"+crew2+"']").text();
//this___^ is the culprit.
The comma is basically saying I want all elements with the class front and all td elements with the specified name.
What you want is probably:
$("td[name='front"+crew2+"'].front").text();
Thought I haven't tested that, and the syntax may be off slightly.