Adding a row to table using a loop - javascript

I'm working on a project where I'm creating a table of items. It looks like so:
<table>
<tr>
<th>Priority</th>
<th>Item</th>
</tr>
<tr>
<td>1</td>
<td><input type="text"><br></td>
</tr>
<tr>
<td>2</td>
<td><input type="text"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text"></td>
</tr>
</table>
<script type = "text/javascript">
</script>
</head>
<body>
</body>
</html>
I want to have a button that will add another row with the next number and space to imput data. Is there anyway to write that in a loop using Javascript?

How about:
<table id="specialtable">
<tr>
<th>Priority</th>
<th>Item</th>
</tr>
<tr>
<td>1</td>
<td><input type="text"><br></td>
<td><button onclick="addRow(this);">Add</button><br></td>
</tr>
</table>
<script type = "text/javascript">
function addRow(e) {
var current = e.parentNode.parentNode; // <tr>...</tr>
var tnew = current.cloneNode(true);
var rowCount = current.parentNode.getElementsByTagName("tr").length;
tnew.getElementsByTagName("td")[0].textContent = rowCount;
current.parentNode.appendChild(tnew);
}
</script>
</head>
<body>
</body>
</html>

Related

jquery automatically check checkbox with values in array

I have a table like so
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
I have a jquery array where there some ids stored of those rows example
id= [123,431,213]
what I want is when my page loads the ids which are inside the array to be already checked
$(document).ready(function () {
//code
});
I do not know how to go about this any help would be helpful
Iterate over each row in the table body and for each take the text value of the first cell and check to see if your array includes it.
const arr = [ 431, 123, 888 ];
// Iterate over the rows
$('tbody tr').each((i, el) => {
// Grab the first cell's text and coerce it to a number
const number = Number($(el).find('td').first().text());
// If the value is in the array
if (arr.includes(number)) {
// Find the input and check it
$(el).find('input[type="checkbox"]').prop('checked', 'checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>124</td>
<td>Bob</td>
<td>23</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
var ids = ['431', '132'];
$( document ).ready(function() {
$('td.id').each(function( index ) {
if (ids.includes($(this).text())){
$( "input.checkboxes" ).eq( index ).prop( "checked", true );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td class="id">123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>

Copy Internal Table value to External table on checkbox click

<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementById("checx").getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+ FirstColumn.textContent);
};
}
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
</script>
//I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
</body>
</html>
I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
Thanks for your help in advance
the main issue that checkboxes ids has to be unique per element so you have to depend on class name rather than ids of checkboxes
in addition to the following code
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
Has to be inside the event handler
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table id="parentTable" border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx1" class="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx2" class="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx3" class="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" id="checx4" class="checx" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementsByClassName("checx");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+FirstColumn.textContent);
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
};
}
</script>
</body>
</html>

multiply table td value

I have table with quantity cell as editable when change quantity it need to multiply with other parent td value.Here is my code
(i.e) if i change quantity to 2 then the parent rows need multiply by 2
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var tbvalue=$(this).parents('td').val();
console.log(tbvalue);
var val=$(this).val();
var result=tbvalue*val;
console.log(result);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="table table-hover">
<thead>
<tr>
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>5</td>
<td>4</td>
<td class="quantity" type="number" contenteditable>1</td>
</tr>
<tr>
<td>8</td>
<td type>2</td>
<td>3</td>
<td class="quantity" type="number" contenteditable>1</td>
</tr>
<tr>
<td>20</td>
<td>3</td>
<td>5</td>
<td class="quantity" type="number" contenteditable>1</td>
</tr>
</tbody>
</table>
</div>
Try this.Get the text from each td using this $(this).text(); and multiply that with input value
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var val=$(this).text();
if(val =='' || isNaN(val) || val < 1){
return;
}
$(this).siblings().each(function(){
var tbvalue=$(this).text();
var result= parseInt(tbvalue)*parseInt(val);
$(this).text(result);
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="table table-hover">
<thead>
<tr>
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>5</td>
<td>4</td>
<td class="quantity" type="number" contenteditable>1</td>
</tr>
<tr>
<td>8</td>
<td type>2</td>
<td>3</td>
<td class="quantity" type="number" contenteditable>1</td>
</tr>
<tr>
<td>20</td>
<td>3</td>
<td>5</td>
<td class="quantity" type="number" contenteditable>1</td>
</tr>
</tbody>
</table>
</div>

Duplication while appending the rows in jquery

I am new to jquery and javascript.please help me to resolve this error. When clicking the checkbox(more than 3 times) it append the cells more than one time. Thanks in advance. Please help me. * its appending the cells more than once
function suma()
{
alert("hi");
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
Try this,
function suma() {
$('#one').on("click", function() {
var appendStr = "<td> a </td><td> b</td><td> c</td>";
$('#one input:checked').parent().parent().wrap("<tr></tr>")
.append(appendStr).appendTo("#two");
// add string inside TR and append the a b c then appendTo table.
});
}
Working example
Hope helps,
Well I don't know why you are having your jquery click event inside function.
Replace your function with this :
function suma(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
}
Check if the div(#two) already don't have the table("#one") then add it with find function then check if the table does not have this tr then add it be carful that you add table depending on if which will result in more than one with the same id so depend on class is prefer.
function suma()
{
alert("hi");
$('#one').on("click", function(){
if($("#two").find("#one")==0){
$('#one input:checked').parent().parent().appendTo("#two");
}
if($("#two").find("#one").find("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>") ==0){
$("#two").find("#one").append("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>");
}
});
}
You need to append additional text, then after need to append to #two
Try following code,
function suma()
{
var row = $('#one input:checked').parent().parent().append("<td> a </td><td> b</td><td> c</td>");
row.appendTo("#two");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
I think You are Looking For this.
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
</table>
</body>
</html>

javascript: TypeError: document.getElementById("myTable") is null

i'm getting the following error:
TypeError: document.getElementById("myTable") is null
on document.write(document.getElementById("myTable").rows[i].innerHTML);
It goes into a never ending loop.
Can someone tell me on what i'm doing wrong? Thank you.
My code:
<script type="text/javascript">
function colorRows(){
count=document.getElementById("myTable").rows.length;
alert("count is:"+count);
for (i=0;i<=count;i++){
if (i%2===0){
document.write(document.getElementById("myTable").rows[i].innerHTML);
}
}
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<th>emp_id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>vaani</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Ramu</td>
<td>37</td>
</tr>
<tr>
<td>3</td>
<td>Iniyan</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>Mickey</td>
<td>10</td>
</tr>
</table>
<form method="post" action="JavaScript:colorRows();">
<input type="submit" value="Submit" />
</form>
</body>
</html>
It is because when you do document.write in the loop in the first time you clear dom and there is no more table element, and when you do document.write in the second time then document.getElementById("myTable") provides null. So browser stops the script provide the error.
I have the same error when I run your code.
I put myTable to a new variable outside of for. It works fine. like that.
var myTableVar = document.getElementById("myTable");
var i;
for (i=0;i<=count;i++){
alert("i = " + i);
if (i%2===0){
document.write(myTableVar.rows[i].innerHTML);
}
}
Complete code:
<html>
<head>
<script type="text/javascript">
function colorRows(){
count=document.getElementById("myTable").rows.length;
alert("count is:" + count);
var myTableVar = document.getElementById("myTable");
var i;
for (i=0;i<=count;i++){
alert("i = " + i);
if (i%2===0){
document.write(myTableVar.rows[i].innerHTML);
}
}
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<th>emp_id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>vaani</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Ramu</td>
<td>37</td>
</tr>
<tr>
<td>3</td>
<td>Iniyan</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>Mickey</td>
<td>10</td>
</tr>
</table>
<form method="post" action="JavaScript:colorRows();">
<input type="submit" value="Submit" />
</form>
</body>
</html>
Try this
function colorRows(){
var table = document.getElementById("myTable");
count=table.rows.length;
alert("count is:"+count);
for (i=0;i<=count;i++){
if (i%2===0){
document.write(table.rows[i].innerHTML);
}
}
}
Best to only access the table once anyway. document.write() clears the page because it calls document.open()

Categories