I have a table where the user can decide how many rows they wish to add. I've found a script that copy and pastes both columns and rows from excel. It works perfectly from the first 2 existing row's but the function doesn't work properly in any of the cloned rows that get added.
So if you use the function on the first two row's it will split the paste into each row and column (inluding the cloned rows) but if i try paste into a newly added row the function just doesn't work,
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
var getTotalRows = $('table > tbody').children().length;
for (var i = -1; i < rowAmmount-1;i++) {
var row = document.getElementById("row"); // find row to copy
var table = document.getElementById("table"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
clone.classList.remove('hidden');
table.appendChild(clone); // add new row to end of table
$('#newRow' + (getTotalRows + i)).children().each(function() {
$(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
});
}}
$('input').on('paste', function(e){
var $this = $(this);
$.each(e.originalEvent.clipboardData.items, function(i, v){
if (v.type === 'text/plain'){
v.getAsString(function(text){
var x = $this.closest('td').index(),
y = $this.closest('tr').index()+1,
obj = {};
text = text.trim('\r\n');
$.each(text.split('\r\n'), function(i2, v2){
$.each(v2.split('\t'), function(i3, v3){
var row = y+i2, col = x+i3;
obj['cell-'+row+'-'+col] = v3;
$this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3);
});
});
});
}
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<table>
<thead>
<tr>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description></th>
<th>Material</th>
<th>Style</th>
</tr>
</thead>
<tbody id="table">
<tr id="row">
<td><input id="productId"></td>
<td><input id="itemname"></td>
<td><input id="long"></td>
<td><input id="fabric"></td>
<td><input id="style"></td>
</tr>
<tr id= "newRow0">
<td><input id="productId0"></td>
<td><input id="itemname0"></td>
<td><input id="long0"></td>
<td><input id="fabric0"></td>
<td><input id="style0"></td>
</tr>
</tbody>
</table>
You attach the change event handler before you insert the new inputs.
What you need is delegated event handling $('table').on('paste', 'input', function(e){
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
var getTotalRows = $('table > tbody').children().length;
for (var i = -1; i < rowAmmount-1;i++) {
var row = document.getElementById("row"); // find row to copy
var table = document.getElementById("table"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
clone.classList.remove('hidden');
table.appendChild(clone); // add new row to end of table
$('#newRow' + (getTotalRows + i)).children().each(function() {
$(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
});
}}
$('table').on('paste', 'input', function(e){
var $this = $(this);
$.each(e.originalEvent.clipboardData.items, function(i, v){
if (v.type === 'text/plain'){
v.getAsString(function(text){
var x = $this.closest('td').index(),
y = $this.closest('tr').index()+1,
obj = {};
text = text.trim('\r\n');
$.each(text.split('\r\n'), function(i2, v2){
$.each(v2.split('\t'), function(i3, v3){
var row = y+i2, col = x+i3;
obj['cell-'+row+'-'+col] = v3;
$this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3);
});
});
});
}
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<table>
<thead>
<tr>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description></th>
<th>Material</th>
<th>Style</th>
</tr>
</thead>
<tbody id="table">
<tr id="row">
<td><input id="productId"></td>
<td><input id="itemname"></td>
<td><input id="long"></td>
<td><input id="fabric"></td>
<td><input id="style"></td>
</tr>
<tr id= "newRow0">
<td><input id="productId0"></td>
<td><input id="itemname0"></td>
<td><input id="long0"></td>
<td><input id="fabric0"></td>
<td><input id="style0"></td>
</tr>
</tbody>
</table>
I have been trying to add both a row and a column to a table, which I think I have finally managed. Now I am trying to create a button using javascript beneath the table that will calculate the sum of each row in the new column and will calculate the the last two columns in the new row. I have tried various ways of creating the button but I can't seem to make it work, and as you can see I don't know how to create the code that will make the calculations that I need.
Here is my code:
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
function addRow()
{
if (!document.getElementById) return false;
var table = document.getElementById("pricetable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.setAttribute("id","sumrow");
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
}
function addColumn()
{
if (!document.getElementById) return false;
if (!document.createElement) return false;
var tHead = document.getElementById("pricetable").tHead;
for (var h=0; h<tHead.rows.length; h++)
{
var newTHead = document.createElement("th");
tHead.rows[h].appendChild(newTHead);
newTHead.innerHTML = "Sum";
}
var tBody = document.getElementById("pricetable").tBodies[0];
for (var i=0; i<tBody.rows.length; i++)
{
var newCell = tBody.rows[i].insertCell(-1);
}
}
function addButton()
{
var btn = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("name","Calc price");
var foo = document.getElementById("pricetable");
foo.appendChild(btn);
btn.onclick = function()
{
alert ("Calulate price");
}
}
addLoadEvent(addRow);
addLoadEvent(addColumn);
addLoadEvent(addButton);
Here is the HTML code:
<body>
<div id ="container">
<div id ="header">
<h1>Electronics</h1>
</div>
<div id ="content">
<h3>Our prices</h3>
<table id ="pricetable">
<thead>
<tr>
<th>Article</th>
<th>Type</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>23456789</td>
<td>Phone</td>
<td>Apple</td>
<td>6500</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>22256289</td>
<td>Phone</td>
<td>Samsung</td>
<td>6200</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>24444343</td>
<td>Phone</td>
<td>MS Lumia</td>
<td>4200</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>19856639</td>
<td>Tablet</td>
<td>LG</td>
<td>4000</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>39856639</td>
<td>Tablet</td>
<td>Dell</td>
<td>2800</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>12349862</td>
<td>Tablet</td>
<td>Apple</td>
<td>3500</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
I have a script below:
var cells = [].slice.call(document.querySelectorAll("#myTable td"));
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
cells.forEach(function(cell) {
if (!search.value.trim()) {
cell.style.background = "white";
cell.style.display = 'table-cell';
} else if (cell.textContent.toLowerCase().indexOf(search.value.toLowerCase()) == 0) {
cell.style.background = 'yellow';
cell.style.display = "table-cell";
} else {
cell.style.background = "white";
cell.style.display = 'none';
}
});
});
<input id='myInput' type='text'>
<table id='myTable'>
<tr>
<td>a</td>
<td>ab</td>
<td>abs</td>
<td>ador</td>
<td>turous</td>
<td>acac</td>
<td>accle</td>
</tr>
<tr>
<td>ed</td>
<td>aced</td>
<td>ate</td>
<td>acg</td>
<td>aci</td>
<td>atic</td>
<td>ive</td>
</tr>
<tr>
<td>l</td>
<td>pt</td>
<td>able</td>
<td>ad</td>
<td>adoent</td>
<td>ble</td>
<td>d</td>
</tr>
<tr>
<td>ed</td>
<td>a</td>
<td>aate</td>
<td>a</td>
<td>aavating</td>
<td>aive</td>
<td>a</td>
</tr>
<tr>
<td>d</td>
<td>ng</td>
<td>eable</td>
<td></td>
<td>alarmed</td>
<td>ming</td>
<td>t</td>
</tr>
<tr>
<td>ted</td>
<td>ae</td>
<td>all</td>
<td>agjhistic</td>
<td>akjhkjg</td>
<td>hjious</td>
<td>ample</td>
</tr>
<tr>
<td>hjbsed</td>
<td>ahkjng</td>
<td>anhjkd</td>
<td>ahjhnt</td>
<td>ahjkjc</td>
<td>a</td>
<td>hjhed</td>
</tr>
<tr>
<td>aghjed</td>
<td>hjjal</td>
<td>ghjmher</td>
<td>amjhkiue</td>
<td>ahkjus</td>
<td>any</td>
<td>ahmkjehensive</td>
</tr>
<tr>
<td>ajhjkjiate</td>
<td>ahkjpt</td>
<td>arctic</td>
<td>arid</td>
<td>aromatic</td>
<td>artistic</td>
<td>ashamed</td>
</tr>
<tr>
<td>assured</td>
<td>astonishing</td>
<td>athletic</td>
<td>attached</td>
<td>attentive</td>
<td>atkjkjactive</td>
<td>ahghbtere</td>
</tr>
<tr>
<td>bhkuhish</td>
<td>hkjh</td>
<td>bhkre</td>
<td>barren</td>
<td>basic</td>
</tr>
<tr>
<td>befsgdfgful</td>
<td>bdsfsdfed</td>
<td>dsfsdfved</td>
<td>bedsfsfcial</td>
<td>better</td>
<td>best</td>
<td>bdfsfitched</td>
</tr>
</table>
I use this script for searching text with an HTML table. It have more than 500 cells like 100 rows and 5 columns etc. This script works well for finding text within a short table but when I search anything it also display gap of rows and columns, if i have a long table which has more than 500 cells.
Here I tried to used regular expressions like \s and /g but it doesn't work, may be I insert them on wrong place. Also I tried to change cell.style.display = "table-cell"; with many other style but doesn't work.
Can any one properly guide me what and where I have to put exactly to get output properly without rows/columns gap if i have more than 500 cells and what that mean with syntax description.
Try this! =)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="input"/>
<div class="print"></div>
<script>
var data = ['food', 'bar', 'google']; // your data
var fx = function(text) {
var print = function(list,s) {
var table = $('<table/>').css('width','100%');
var x = 0;
while (list[x]) {
var tr = $('<tr/>');
while (list[x] && x < 5) {
var td = $('<td/>').text(list[x])
if(s == list[x]){
td.css('background','red');
}
tr.append(td);
x++;
}
table.append(tr);
}
$('.print').html(table);
}
if (typeof text === "undefined") {
print(data, '');
} else {
var find = [];
for (var i = 0; data[i]; i++) {
if (data[i].toLowerCase().indexOf(text.toLowerCase()) == 0) find[find.length] = data[i];
}
print(find,text);
}
}
$(function() {
$('.input').keyup(function() {
fx($(this).val());
});
fx();
});
</script>
My first thought was to set the input checked = "javascript function() true/false" is this possible?
What I am trying to do is a select all checkbox for my forum mailbox system.
I am useing a table to display the inbox and placed the select all checkbox inside.
<form action="" method = "post">
<table rules="all">
<tr>
<th>
<input type="checkbox" id = "setchecked" name="smessgage"value="deleteall" onclick="get_checked()"/>
</th>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
I use
onclick="get_checked()
to call this javascript function which sets the other checkboxes checked attribute.
<script>
function get_checked()
{
if(document.getElementById("setchecked").checked)
{
for(var i = 0; i < 100;++i)
{
var check_id = "smessage"+i;
if(document.getElementById(check_id))
document.getElementById(check_id).checked = true;
}
}
else
{
for(var i = 0; i < 100;++i)
{
var check_id = "smessage"+i;
if(document.getElementById(check_id))
document.getElementById(check_id).checked = false;
}
}
}
</script>
The php to set the table up looks like this.
$i = 0;
while($row = mysqli_fetch_assoc($result))
{
if(isset($row['to_']) && $row['to_'] == $_SESSION['user_name'])
{
$id_ = isset($row['id']) ? $row['id'] : '';
$top_ = isset($row['subject']) ? $row['subject'] : '';
$auth_ = isset($row['from_']) ? $row['from_'] : '';
$date_ = isset($row['date']) ? $row['date'] : '';
echo '<tr id = "cat_" name = "cat_1">
<td style = "margin:0 auto; text-align:center;"><input type="checkbox" id = "smessage'.$i.'" name="smessgage" value="'.$id_.'"/></td>
<td style = "margin:0 auto; text-align:center;"><a href = "mail?from='.$auth_.'&mail_id='.$id_.'&mail_name='.$top_.'">'.
$auth_.'</a></td>
<td style = "margin:0 auto; text-align:center;"><a href = "mail?from='.$auth_.'&mail_id='.$id_.'&mail_name='.$top_.'">'.
$top_.'</a></td>
<td style = "margin:0 auto; text-align:center;"><a href = "mail?from='.$auth_.'&mail_id='.$id_.'&mail_name='.$top_.'">'.
time_elapsed_string($date_,true).'</a></td></tr>';
++$i;
}
}
This works as expected but seems a bit overkill. I just want to know if there is a more relastic approach or something that I missed while looking over input types?
Here is your improved version. Basically you just need to use same class for all checkbox before each line of your message, so that you can use jQuery.each() function to select all and toggle the checked property based on your main checkbox, which has id "setchecked"
Hope this help,
KD Quality
function checkAll(bx) {
var cbs = jQuery(".checkbox_class").each(function() {
jQuery(this).prop('checked', jQuery('#setchecked').prop('checked'));
});
}
var e = document.getElementById('setchecked'); e.onclick = checkAll;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="post">
<table rules="all">
<tr>
<th>
<input type="checkbox" id="setchecked" name="smessgage" value="deleteall" />
</th>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
<tr>
<td>
<input type="checkbox" name="messgage[]" value="message_1" class="checkbox_class" />
</td>
<td>Message 1</td>
<td>Message 1</td>
<td>Some Date</td>
</tr>
<tr>
<td>
<input type="checkbox" name="messgage[]" value="message_2" class="checkbox_class" />
</td>
<td>Message 1</td>
<td>Message 1</td>
<td>Some Date</td>
</tr>
<tr>
<td>
<input type="checkbox" name="messgage[]" value="message_3" class="checkbox_class" />
</td>
<td>Message 1</td>
<td>Message 1</td>
<td>Some Date</td>
</tr>
</table>
</form>
You could do something like this
// The important code
function selectAll(e) {
var nodes = document.querySelectorAll('form input[type=checkbox]');
for(var i = 0; i < nodes.length; i++) {
nodes[i].checked = e.target.checked;
};
}
// This is only code to genereate input elements
var form = document.getElementById('foo');
for (var i = 0; i < 15; i++) {
var input = document.createElement('input');
input.type = "checkbox";
form.appendChild(input);
}
<input id="selectall" type="checkbox" onclick="selectAll(event)" />
<label for="selectall">Select all</label>
<hr />
<form id="foo"></form>
I'm trying to pass data from one table to be used in another on the same page in javascript. The second table has rows 2-n hidden and I'd like them to dynamically appear when they're populated with data from the first table.
The first table that can be filled out looks like this:
<h3><em>Per Serving</em></h3>
<form name="ingredient-table">
<datalist id="ingredients">
<option value="Creatine Monohydrate">
<option value="St. John's Wort">
<option value="5-HTP">
<option value="Magnesium">
<option value="Magnesium Citrate">
<option value="Vitamin A">
<option value="Vitamin D3">
<option value="Cocoa">
<option value="Stevia">
<option value="Lavender Root Extract">
</datalist>
<table border="1" style="padding: 5px;">
<tr>
<td>Ingredient Name</td>
<td>Amount (in Mg)</td>
<td>% Carrier</td>
<td>$$/Kilo</td>
<td></td>
<td>Total Carrier Volume</td>
<td>Total Ingredient Volume</td>
</tr>
<tr>
<td><input type="text" id="a" list="ingredients"></input></td>
<td><input type="number" id="b"> Mg</input></td>
<td><input type="number" id="c"></input> %</td>
<td><input id="d"></input></td>
<td><button type="button" onclick="calculate('a', 'b', 'c', 'd', 'e', 'f')">Calculate Final
Volume</button></td>
<td id="e"><input></input></td>
<td id="f"><input></input></td>
<td>New Ingredient</td>
</tr>
<tr id="row2" style="display: none;">
<td><input type="text" id="h" list="ingredients"></input></td>
<td><input type="number" id="i"> Mg</input></td>
<td><input type="number" id="j"></input> %</td>
<td><input id="k"></input></td>
<td><button type="button" onclick="calculate('h', 'i', 'j', 'k', 'l', 'm')">Calculate Final
Volume</button></td>
<td id="l"><input></input></td>
<td id="m"><input></input></td>
<td>New Ingredient</td>
<td>Delete Ingredient</td>
</tr>
<tr id="row3" style="display: none;">
<td><input type="text" id="o" list="ingredients"></input></td>
<td><input type="number" id="p"> Mg</input></td>
<td><input type="number" id="q"></input> %</td>
<td><input id="r"></input></td>
<td><button type="button" onclick="calculate('o', 'p', 'q', 'r', 's', 't')">Calculate Final
Volume</button></td>
<td id="s"><input></input></td>
<td id="t"><input></input></td>
<td>New Ingredient</td>
<td>Delete Ingredient</td>
</tr>
<tr id="row4" style="display: none;">
<td><input type="text" id="v" list="ingredients"></input></td>
<td><input type="number" id="w"> Mg</input></td>
<td><input type="number" id="x"></input> %</td>
<td><input id="y"></input></td>
<td><button type="button" onclick="calculate('v', 'w', 'x', 'y', 'z', 'a1')">Calculate Final
Volume</button></td>
<td id="z"><input></input></td>
<td id="a1"><input></input></td>
<td>New Ingredient</td>
<td>Delete Ingredient</td>
</tr>
<tr id="row5" style="display: none;">
<td><input type="text" id="a3" list="ingredients"></input></td>
<td><input type="number" id="a4"> Mg</input></td>
<td><input type="number" id="a5"></input> %</td>
<td><input id="a6"></input></td>
<td><button type="button" onclick="calculate('a3', 'a4', 'a5', 'a6', 'a7', 'a8')">Calculate
Final Volume</button></td>
<td id="a7"><input></input></td>
<td id="a8"><input></input></td>
<td>New Ingredient</td>
<td>Delete Ingredient</td>
</tr>
</table>
</form>
The second table that accepts the data from the above table is this:
<h3>Per Bottle</h3>
<button type="button" onclick="bottle_volume('td1', 'td2', 'td3', 'td4', 'td5', 'td6', 'td7',
'td8','td9', 'td10', 'td11', 'td12', 'td13', 'td14', 'td15', 'td16', 'td17', 'td18', 'td19',
'td20')">Click to Calculate Bottle Totals</button>
<table border="1" style="padding: 5px;">
<tr>
<td>Ingredient</td>
<td>Total Amount of Carrier</td>
<td>Total Per Bottle</td>
<td>Total Cost Per Bottle</td>
</tr>
<tr id="outputRow1">
<td id="td1"><input></input></td>
<td id="td2"><input></input></td>
<td id="td3"><input></input></td>
<td id="td4"><input></input></td>
</tr>
<tr id="outputRow2" style="display: none;">
<td id="td5"><input></input></td>
<td id="td6"><input></input></td>
<td id="td7"><input></input></td>
<td id="td8"><input></input></td>
</tr>
<tr id="outputRow3" style="display: none;">
<td id="td9"><input></input></td>
<td id="td10"><input></input></td>
<td id="td11"><input></input></td>
<td id="td12"><input></input></td>
</tr>
<tr id="outputRow4" style="display: none;">
<td id="td13"><input></input></td>
<td id="td14"><input></input></td>
<td id="td15"><input></input></td>
<td id="td16"><input></input></td>
</tr>
<tr id="outputRow5" style="display: none;">
<td id="td17"><input></input></td>
<td id="td18"><input></input></td>
<td id="td19"><input></input></td>
<td id="td20"><input></input></td>
</tr>
<tr>
<td id="td21"><strong>Totals</strong></td>
<td id="td22"></td>
<td id="td23"></td>
<td id="td24"></td>
</tr>
</table>
The for-loop I use on the second table to make the rows appear is this:
var rowArray = ["outputRow1", "outputRow2", "outputRow3", "outputRow4", "outputRow5"];
for (i = 0; i < rowArray.length; i++) {
if (document.getElementById(rowArray[i]).innerHTML !== "") {
document.getElementById(rowArray[i]).style.display = 'table row';
}
else {
document.getElementById(rowArray[i]).style.display = 'none';
}
}
This doesn't cause the hidden rows to appear when they're populated. It doesn't seem to have any effect at all, and also does not cause any errors to appear in the javascript console.
The entire function that happens when you hit the button "Click to Calculate Bottle Totals"
is bottle_volume('td1', 'td2',...) and it looks like this:
var bottle_volume = function(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11,
arg12, arg13, arg14, arg15, arg16, arg17, arg18, arg19, arg20) {
var ing1Value = calculate('a', 'b', 'c', 'd', 'e', 'f');
var ing1 = ing1Value[0];
var ing1_carrier = ing1Value[3]*30;
var ing1_volume = ing1Value[4]*30;
var ing1_cost = (ing1_volume/1000000)*ing1Value[2];
var name1 = document.getElementById(arg1).innerHTML = ing1;
var carrier1 = document.getElementById(arg2).innerHTML = ing1_carrier.toFixed(2)*1;
var ing_volume1 = document.getElementById(arg3).innerHTML = ing1_volume.toFixed(2)*1;
var ingCost1 = document.getElementById(arg4).innerHTML ="$" + ing1_cost.toFixed(2)*1;
var ing2Value = calculate('h', 'i', 'j', 'k', 'l', 'm');
var ing2 = ing2Value[0];
var ing2_carrier = ing2Value[3]*30;
var ing2_volume = ing2Value[4]*30;
var ing2_cost = (ing2_volume/1000000)*ing2Value[2];
var name2 = document.getElementById(arg5).innerHTML = ing2;
var carrier2 = document.getElementById(arg6).innerHTML = ing2_carrier.toFixed(2)*1;
var ing_volume2 = document.getElementById(arg7).innerHTML = ing2_volume.toFixed(2)*1;
var ingCost2 = document.getElementById(arg8).innerHTML = "$" + ing2_cost.toFixed(2)*1;
var ing3Value = calculate('o', 'p', 'q', 'r', 's', 't');
var ing3 = ing3Value[0];
var ing3_carrier = ing3Value[3]*30;
var ing3_volume = ing3Value[4]*30;
var ing3_cost = (ing3_volume/1000000)*ing3Value[2];
var name3 = document.getElementById(arg9).innerHTML = ing3;
var carrier3 = document.getElementById(arg10).innerHTML = ing3_carrier.toFixed(2)*1;
var ing_volume3 = document.getElementById(arg11).innerHTML = ing3_volume.toFixed(2)*1;
var ingCost3 = document.getElementById(arg12).innerHTML = "$" + ing3_cost.toFixed(2)*1;
var ing4Value = calculate('v', 'w', 'x', 'y', 'z', 'a1');
var ing4 = ing4Value[0];
var ing4_carrier = ing4Value[3]*30;
var ing4_volume = ing4Value[4]*30;
var ing4_cost = (ing4_volume/1000000)*ing4Value[2];
var name4 = document.getElementById(arg13).innerHTML = ing4;
var carrier4 = document.getElementById(arg14).innerHTML = ing4_carrier.toFixed(2)*1;
var ing_volume4 = document.getElementById(arg15).innerHTML = ing4_volume.toFixed(2)*1;
var ingCost4 = document.getElementById(arg16).innerHTML = "$" + ing4_cost.toFixed(2)*1;
var ing5Value = calculate('a3', 'a4', 'a5', 'a6', 'a7', 'a8');
var ing5 = ing5Value[0];
var ing5_carrier = ing5Value[3]*30;
var ing5_volume = ing5Value[4]*30;
var ing5_cost = (ing5_volume/1000000)*ing5Value[2];
var name5 = document.getElementById(arg17).innerHTML = ing5;
var carrier5 = document.getElementById(arg18).innerHTML = ing5_carrier.toFixed(2)*1;
var ing_volume5 = document.getElementById(arg19).innerHTML = ing5_volume.toFixed(2)*1;
var ingCost5 = document.getElementById(arg20).innerHTML = "$" + ing5_cost.toFixed(2)*1;
carrierPerBottle = ing1_carrier + ing2_carrier + ing3_carrier + ing4_carrier + ing5_carrier;
volumePerBottle = ing1_volume + ing2_volume + ing3_volume + ing4_volume + ing5_volume;
costPerBottle = ing1_cost + ing2_cost + ing3_cost + ing4_cost + ing5_cost;
document.getElementById("td22").innerHTML = carrierPerBottle.toFixed(2)*1;
document.getElementById("td23").innerHTML = volumePerBottle.toFixed(2)*1;
document.getElementById("td24").innerHTML = "$" + costPerBottle.toFixed(2)*1;
var rowArray = ["outputRow1", "outputRow2", "outputRow3", "outputRow4", "outputRow5"];
for (i = 0; i < rowArray.length; i++) {
if (document.getElementById(rowArray[i]).innerHTML !== "") {
document.getElementById(rowArray[i]).style.display = 'table row';
}
else {
document.getElementById(rowArray[i]).style.display = 'none';
}
};
};
I'm not sure what's wrong with my for-loop. I'm only using javascript for this and would prefer not to use jquery.
You can see the whole page here: Supplement Pricer
This is the rendered HTML for outputRow1:
<tr id="outputRow1">
<td id="td1"><input></input></td>
<td id="td2"><input></input></td>
<td id="td3"><input></input></td>
<td id="td4"><input></input></td>
</tr>
Same goes for outputRow2, outputRow3, outputRow4 and outputRow5, but they have different elements in their <td>.
When you call this function in Javascript:
var rowArray = ["outputRow1", "outputRow2", "outputRow3", "outputRow4", "outputRow5"];
for (i = 0; i < rowArray.length; i++) {
if (document.getElementById(rowArray[i]).innerHTML !== "") {
...
You're checking to see if outputRow1 has anything in it's Inner HTML, which it does. Therefore, it's going to display the row no matter what.
Basically, you need to check if their corresponding rows are set to display:none or display:table-row and display the outputRowN accordingly. I think this will work, but give it a try:
var rowArray = ["row2", "row3", "row4", "row5"]; // Skip row 1, always shows;
var outputArray = ["outputRow2", "outputRow3", "outputRow4", "outputRow5"];
for (i = 0; i < rowArray.length; i++) {
if (document.getElementById(rowArray[i]).getAttribute("style") != "display: none;"){
console.log("True");
document.getElementById(outputArray[i]).setAttribute("style", "");
} else {
console.log("False");
document.getElementById(outputArray[i]).setAttribute("style", "display: none;");
}
}
FINAL EDIT
Working Fiddle Example:
JSFiddle
if (document.getElementById(rowArray[i]).innerHTML !== "") {
document.getElementById(rowArray[i]).style.display = 'table row';
}
try changing the above code to (take out 'table row'):
if (document.getElementById(rowArray[i]).innerHTML !== "") {
document.getElementById(rowArray[i]).style.display = '';
}
i dont know if this will work, but its easier to post code in code format in the answer box then make a comment for it.
so i came up with another answer that requires at least one of the inputs of a row from table 1 to be filled out in order for the corresponding row in table 2 to be shown. i require one input to have at least some contents because if its based on if the row from table 1 is showing, you would just have a bunch of 0's in a bunch of rows in table 2.
heres the demo: http://jsfiddle.net/swm53ran/50/
calculate<br/><br/>
table 1<br/>
<table border="1" style="padding: 5px;">
<tr id="row1">
<td id="td1"><input></input></td>
<td id="td2"><input></input></td>
</tr>
<tr id="row2">
<td id="td3"><input></input></td>
<td id="td4"><input></input></td>
</tr>
<tr id="row3">
<td id="td5"><input></input></td>
<td id="td6"><input></input></td>
</tr>
</table>
<br/>
table 2<br/>
<table border="1" style="padding: 5px;" class="table2">
<tr id="outputRow1">
<td><input value="row1"></input></td>
<td><input></input></td>
</tr>
<tr id="outputRow2" style="display:none;">
<td><input value="row2"></input></td>
<td><input></input></td>
</tr>
<tr id="outputRow3" style="display:none;">
<td><input value="row3"></input></td>
<td><input></input></td>
</tr>
</table>
<script>
function populate() {
var rowArray = ["row2", "row3"];
var outArray = ["outputRow2", "outputRow3"];
for (i = 0; i < rowArray.length; i++) {
var inputs = document.getElementById(rowArray[i]).getElementsByTagName('input'); // get the inputs of table 1 row
var show = false;
for (j = 0; j < inputs.length; j++) {
if (inputs[j].value.length > 0) { // if at least one text box has contents, show = true
show = true;
}
}
if (show == true) {
document.getElementById(outArray[i]).style.display = "table-row";
}
else {
document.getElementById(outArray[i]).style.display = "none";
}
}
}
</script>
when the information from the text boxes of a given row are all empty in table 1, the row in table 2 will hide. hope this is suitable for your needs.