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");
}
});
Related
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
I'm atm working on getting a dynamic table into an html page with a button on every table row's first column to display a description of an item(it's an itemlist).
however when setting the innerhtml with an onclick event i am not able to fire an alert .When i want to call another JS function to call the alert and trying to pass an argument in my onclick function it wont do nothing, when trying to escape the quotes nothing works.
Javascript
function showAuctionList(auctionList){
var table = document.getElementById("myTableData");
for(var i = 0 ; i< auctionList.length ; i++){
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var description = auctionList[i].itemDesc;
row.insertCell(0).innerHTML= '<input type="button" value = "Show Description" onclick="showDescription( description)">';
row.insertCell(1).innerHTML= auctionList[i].auctionId;
row.insertCell(2).innerHTML= auctionList[i].sellId;
row.insertCell(3).innerHTML= auctionList[i].startDate;
row.insertCell(4).innerHTML= auctionList[i].endDate;
row.insertCell(5).innerHTML= auctionList[i].buyNow;
row.insertCell(6).innerHTML= auctionList[i].minBid;
row.insertCell(7).innerHTML= auctionList[i].actualBid;
row.insertCell(8).innerHTML= auctionList[i].itemCat;
row.insertCell(9).innerHTML= auctionList[i].itemName;
row.insertCell(10).innerHTML= auctionList[i].itemDesc;
}
}
function showDescription(desc){
alert(desc);
}
HTML
<div id="search" style="display:none">
<button id="searchButton" onclick="
google.script.run.withSuccessHandler(showAuctionList).getAuctionList()"> Search </button> <br>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Auction ID</b></td>
<td><b>Seller ID</b></td>
<td><b>Start Date</b></td>
<td><b>End Date</b></td>
<td><b>Buy now option</b></td>
<td><b>Min Bid</b></td>
<td><b>Actual Bid</b></td>
<td><b>Category</b></td>
<td><b>Item Name</b></td>
<td><b>Description</b></td>
</tr>
</table>
<br/>
</div>
gs function call:
function doget(e){
...
return HtmlService.createTemplateFromFile('Main').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
can this be escaped that description works as an parameter or whats the workaround about the issue?The rest works perfectly fine though
Try this. As description seems to be a string value you need to surround it with qoutes.
row.insertCell(0).innerHTML = '<input type="button" value = "ShowDescription" onclick="showDescription(\'' + description + '\');">';
You need not escape if use this code:
row.insertCell(0).innerHTML= '<input type="button" value = "Show
Description" onclick="showDescription(this.getAttribute(\'description\'))">';
row.cells[0].firstChild.setAttribute('description', description);
I have 2 tables, and with a button I want to clone the content from tb_new to tb_made:
var tab = document.getElementById('tb_new');
var clone=tab.getElementsByTagName('tr')[1].cloneNode(true);
var table = document.getElementById("tb_made");
table.appendChild(clone);
Everything is cloned fine, except one cell with a textarea.
How can I fix that?
Fiddle is here.
Writing in a <textarea> will only update its value, not its content.
To solve the issue you can do something like this:
function add() {
var tab = document.getElementById('tb_new');
var textAreas = tab.getElementsByTagName("textarea");
for (var i = 0; i < textAreas.length; ++i) {
textAreas[i].innerHTML = textAreas[i].value;
}
var clone = tab.getElementsByTagName('tr')[0].cloneNode(true);
var table = document.getElementById('tb_made');
table.appendChild(clone);
}
<table id="tb_new">
<tr>
<td>
<textarea>Test</textarea>
</td>
<td>
<input>
</td>
</tr>
</table>
<input type="button" value="add" onClick="add()">
<table id="tb_made">
<tr>
<td></td>
</tr>
</table>
First I create a table with n number of rows and each one of them contains a checkbox. I need to get all the ids from all the row checked.
<body>
<table border='1' style='width:100%'>
<tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>
</body>
This is what I got so far:
<script>
$(document).ready(function() {
$('#test').click(function(){
var getID = $(':checkbox:checked').closest('tr').attr('id');
alert(getID);
});
});
</script>
But this only gives me one id. If I select many rows I only get the first selected id. Also I need to store all the ids selected in an array for later use.
User jQuery's each function for this.
$(':checkbox:checked').each(function( index ) {
var closestTr = $(this).closest('tr').attr('id');
alert(closestTr);
});
In jQuery, use selector defaults to the first. so , we should use each get all selector element.
<script>
$(document).ready(function() {
$('#test').click(function(){
var arrId = [];
$(':checkbox:checked').each(function(){
var id = $(this).closest('tr').attr('id');
arrId.push(id);
})
console.log(arrId);
});
});
</script>
var getID = $(':checkbox:checked').closest('tr').attr('id');
Should be:
var getID = $('.checkbox:checked').closest('tr').attr('id');
Try something like this, demo in fiddle. Make sure adding open td , before each input checkbox
JS
$('#test').click(function(){
var ids = $(':checkbox:checked').map(function() {
var id = $(this).closest('tr').prop('id');
alert(id);
return id;
}).get();
alert(ids);
});
HTML
<table border='1' style='width:100%'>
<tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>
Put and id on your table:
<table id="myTab" border='1' style='width:100%'>
To avoid getting other checkboxes in the page, select the checkboxes from within the table like:
var ids = [];
$('#mytab :checkbox:checked').each(function( index ) {
var closestTr = $(this).closest('tr').attr('id');
ids.push(closestTr);
});
alert(ids);
I dynamically created a table with three columns.
<tr>
<td>1</td>
<td>SegName</td>
<td><input type='text' /></td>
</tr>
I'm trying to write a function that goes through each row and grabs the value in that will be in the textbox.
Javascript:
$("#codeSegmentBody").children().eq(x).children().eq(2).val();
The code brings brings up undefined when I do val(), but if I do html it'll grab the html of the textbox.
How can I get this to bring me the value?
<table id="test">
<tr>
<td>
<input type="text" value="123">
</td>
</tr>
<tr>
<td>
<input type="text" value="abc">
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#test").find(":input[type=text]").each(function(){
alert( $(this).val() );
});
});
</script>
Here is a fiddle that will get you there:
http://jsfiddle.net/uS8AK/
Assuming #codeSegmentBody is the name of your table, try this:
$("#codeSegmentBody td input").each(function() {
var inputValue = $(this).val();
alert(inputValue);
});
Example fiddle
$("#codeSegmentBody tr input[type='text']").each(function(){
alert($(this).val());
})
Try this
$("#codeSegmentBody tr").each(function() {
alert($(this).find("input").val());
});
You are referencing the containing <td> not the input. Try:
$("#codeSegmentBody").children().eq(x).find(":text").val();
var str = "";
$("#codeSegmentBody .third-column input").each(function()
{
str += this.value;
});
alert(str);
Not easier
$("table tr td input").val();
?
BTW. You don't have any value in this input anyway.