|
JavaScript - Count The Number Of Rows In The Table
I would like to be able to write a function (or something) to count the number of rows in the table, I don't know how to do it, any help is appreciated.
Similar TutorialsHi, Have a dynamic table in JS that adds rows. Want a max of 8 rows. How can that be done? [CODE] <script language="Javascript" type="text/javascript"> function addRow() { var tbl = document.getElementById('ReqDtTbl'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var textNode = document.createElement('input'); textNode.size = 7; textNode.name = 'startdate' + iteration; cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'enddate' + iteration; el.id = 'enddate' + iteration; el.size = 7; cellRight.appendChild(el); // the last cell! var cellRightSel = row.insertCell(2); var sel = document.createElement('select'); sel.name = 'TypeHrs' + iteration; sel.options[0] = new Option('-Select-', '""'); sel.options[1] = new Option('Comp Time', 'Comp Time'); sel.options[2] = new Option('Credit Hrs', 'Credit Hrs'); sel.options[3] = new Option('Overtime', 'Overtime'); sel.options[4] = new Option('Rel Comp', 'RelComp'); cellRightSel.appendChild(sel); var cellRight = row.insertCell(3); var el = document.createElement('input'); el.type = 'text'; el.name = 'No. of Hours' + iteration; el.id = 'No. of Hours' + iteration; el.size = 7; cellRight.appendChild(el); } [CODE] John Here's part of the code, problem I have is I have it set up for 5 rows, I need it to be able to make more than this, but not sure how many more, this is dependent on user input, how should I go about this? Also how would I go about making the users orders correspond with the right item number? I'd need to sort the array somehow? document.write('<table border="1">'); document.write("<tr>"); document.write('<th colspan="5">ORDER</th>') document.write("</tr>"); document.write("<tr>"); document.write('<th align="left">Item #</th>'); document.write('<th align="center">Name</th>'); document.write('<th align="center">Price</th>'); document.write('<th align="center">Quantity</th>'); document.write('<th align="center">Total</th>'); document.write("</tr>"); document.write('<td align="center">0</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td I need to count how many elements of a certain class are visible. Its for a form and the error messages for the fields are hidden (by default) spans with the class 'errors'. I need my page to count how many of these elements are visible when the user clicks the submit button. Is this possible or should i try and attack it a new way? So never done this one before so I am having a bit of a time trying to figure this one out. Say I have a list of LI element and only a few of them have a inline style of display block, the rest have a display of none. How would I go about looping through and dertmining the number of elements that have a display of block? Code: for(var m = 0; m < li.style.display.length; i++)
{
alert(m);
};
The above is just crazy but where my mind melts.. I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
I wish to know how I can count how many lines there are by searching the innerHTML of a div can anyone suggest how this can be done? also when the new line is added in my code it clears the content of all the existing fields if there was anything in them before the add link was clicked Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function addmore() {
// count existing boxes to find out next number to use.
// ?
document.getElementById('namesdiv').innerHTML += '<textarea name="name_added" cols="30" rows="2"></textarea><br>';
document.getElementById('addressesdiv').innerHTML += '<textarea name="address_added" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile_added" cols="30" rows="2"></textarea><br>';
}
--></script>
</head>
<body>
<form>
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<textarea name="name1" cols="30" rows="2"></textarea><br>
<textarea name="name2" cols="30" rows="2"></textarea><br>
<textarea name="name3" cols="30" rows="2"></textarea><br>
<textarea name="name4" cols="30" rows="2"></textarea><br>
<textarea name="name5" cols="30" rows="2"></textarea><br>
</div>
<div id="addressesdiv" style="float: left; padding-right: 10px;">Client's Addresses<br>
<textarea name="address1" cols="30" rows="2"></textarea><br>
<textarea name="address2" cols="30" rows="2"></textarea><br>
<textarea name="address3" cols="30" rows="2"></textarea><br>
<textarea name="address4" cols="30" rows="2"></textarea><br>
<textarea name="address5" cols="30" rows="2"></textarea><br>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<textarea name="mobile1" cols="30" rows="2"></textarea><br>
<textarea name="mobile2" cols="30" rows="2"></textarea><br>
<textarea name="mobile3" cols="30" rows="2"></textarea><br>
<textarea name="mobile4" cols="30" rows="2"></textarea><br>
<textarea name="mobile5" cols="30" rows="2"></textarea><br>
</div>
</div>
<br style="clear: both;">
<a href="" onClick="javascript:addmore(); return false;" >Add more</a>
</form>
</body>
</html>
I have a table that has multiple subtables built into it, I need to get a count of the number of rows only on the main table, I tried using document.getElementById('tableID').rows.length but that returns 91 rows (its reading all the subtables), the main table is built from a cold fusion page so the length of the table varies depending on your selection. I've been searching around for a bit but have had no luck, Any help would be appreciated. My table starts like this: Code: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> When an addRows button is clicked, the first two rows are copied (cloned), a checbox is then inserted into the row1 cell1, then the two rows are appended: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check[]'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> Rows,except the first two can then be deleted by selecting the appropriate checkbox and clicking a deleteRow button. The check[] only exists after the first two rows have been copied and appended, so undefined means only two rows exist. Having a problem with the while loop. If a browser sees the next sibling of a tr as a td, the the loop should force the browser to go to the next sibling until its a tr, i.e row4. But its causing my browser(FF) to become unresponsive. Code: function deleteRow()
{
if(check == 'undefined')
{
return;
}
else
{
var check = document.getElementsByName('check[]'),row,nextRow,x;
var len = check.length;
for(x=len-1; x>=0; x--)
{
if(check[x].checked)
{
row = check[x].parentNode.parentNode;
while(row.nextSibling.nodeName != 'tr')
{
nextRow = row.nextSibling;
}
nextRow = row.nextSibling;
alert('ok');
}
}
}
}
Appreciate ans help with this? My table had the following layout. Code: <table> <tr> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> After clicking an add rows button, the two rows are cloned and appended as follows with a checkbox added as shown. Code: <table> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> I want to be able to delete rows 3&4 by selecting the checkbox in row 3 and clicking a delete rows button. Regardless of how many sets of rows have been previously added, any set of rows can be deleted by selecting the appropriate checkbox(es) and clicking delete button. I'm trying to figure out how this can be done. My thinking is if checkbox is checked, calculate row index. I would then have to call deleteRow twice on that row index. Is there a better way of doing this? hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. it sum but not like integer for ex. in row1 i enter 20 and in row2 i enter 5 it sums like 205 but i need it sums like 25 if possible pls help me Thanks beforehand here is code Code: <html>
<head>
<title></title>
<script type="text/javascript">
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element txtRow, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of txtRow8. super fantastic.
el.name = 'txtRow' + iteration;
// the exact same thing with a unique id
el.id = 'txtRow' + iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
el.rel = 'sum';
// same thing as earlier, append our element to our freshly and clean cell
cellRight.appendChild(el);
// select cell
// our last cell!
var cellRightSel = row.insertCell(2);
// create another element, this time a select box
var sel = document.createElement('select');
// name it, once again with an iteration (selRow8 using the example above)
sel.name = 'selRow' + iteration;
// crates options in an array
// the Option() function takes the first parameter of what is being displayed
// from within the drop down, and the second parameter of the value it is carrying over
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
sel.options[2] = new Option('text two', 'value2');
// append our new element containing new options to our new cell
cellRightSel.appendChild(sel);
}
function removeRow()
{
// grab the element again!
var tbl = document.getElementById('mySampleTable');
// grab the length!
var lastRow = tbl.rows.length;
// delete the last row if there is more than one row!
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<script type="text/javascript">
function sum() {
var elem = document.getElementById('eval_edit').elements;
// loop fields in form
for (var i = 0; i < elem.length; i++) {
// check if field has attribute 'rel' with value of 'sum'
if (elem[i].getAttribute('rel') == 'sum') {
// parse value as integer and copy to total field
document.getElementById('total').value += parseInt(elem[i].value);
}
}
}
</script>
</head>
<body>
<form action="miro.html" name="eval_edit" method="post" format="html">
<table align="center" width = "75%">
<tr>
<td align = "center">
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
</td>
</tr>
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<td>
Lesson
</td>
<td>
Title
</td>
<td>
Instructor
</td>
</tr>
<!--- i create the initial row by hand, there are a lot of --->
<!--- different ways to do this depending on what parsing --->
<!--- language you use, i found this was easiest for the --->
<!--- snippet, but experiment, do your thing mang. --->
<!--- this matches the same specs we laid out in the javascript --->
<tr>
<td>
1
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
<option value="value2">text two</option>
</select>
</td>
</tr>
</table>
<input name="total" />
<!--- our buttons call our javascript functions when clicked --->
<input type="button" value="Add" onclick="addRow();" />
<input type="button" value="Remove" onclick="removeRow();" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable. I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx FROM JAVASCRIPTTOOLBOX A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row. The only requirements a 1. Put a class of "parent" on each parent row (tr) 2. Give each parent row (tr) an id 3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs Original code: Code: $(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing. My code now looks like this: Code: $(document).ready(function() {
$('tr:not(.parent)').hide();
//$('tr.parent')
$('.arrow')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
$(this).toggleClass("up");
});
});
So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me? Thanks The below javascript code only displays table rows in class ms-formlabel that contain (AP) in the text. It works great. However, I also need it to also insert a new row right above any rows that also contains (H: and in the detail of that new row, I need the string following the H: So a table row with (AP)(H:Sleepless), would insert a row right above that row as follows Code: <TR><TD>Sleepless</TD></TR> possible? Thanks for any help! Code: <script type="text/javascript">
var theRows = document.getElementsByTagName("TR");
var r = 0;
var strTitle = "";
while (r < theRows.length)
{ try
{ strTitle = theRows[r].innerText || theRows[r].textContent;
strTitle = strTitle.replace(/\n|\r|\t|\^ /g,"");
var row = theRows[r],
cells = row.getElementsByTagName('td');
if (cells[0].className.indexOf('ms-formlabel') > -1)
{
if (strTitle.indexOf("(AP)") == -1)
{
theRows[r].style.display = "none";
}
else
{
theRows[r].cells[0].innerHTML = theRows[r].cells[0].innerHTML.replace("(AP)","");
}
}
}catch(err){}r+=1;
}
</script>
Hey there! I found a great code to do this, but I would like to have the row defult set to hide via the Javascript. This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code. Thank you! ................. Code: <html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<span onClick="toggle('nameit');">toggle</span><br /><br />
<table border="1">
<tr nameit=fred >
<td >Always Visible</td>
</tr>
<tr nameit=fred id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>s visible</td>
</tr>
</table>
</script>
</body>
</html>
have created dynamic table with two columns for ex:first column is Income column and second column is tax from Income at the third column are different percent options for ex. I wrote first column 1000 and chose from third drop down box 10% I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100 here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users thanks beforehand here si code Code: <html><head><title>dinamik sheet</title>
<script>
function addrow(){
var tbl=document.getElementById('sheet');
var lastrow=tbl.rows.length;
var iteration=lastrow;
var row=tbl.insertRow(lastrow);
var cellLeft=row.insertCell(0);
var textNode=document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight=row.insertCell(1);
var el=document.createElement('input');
el.type='text';
el.name='txtRow'+iteration;
el.size=40;
el.setAttribute('sumMe',"1");
el.onBlur=sum;
cellRight.appendChild(el);
var cellRight2=row.insertCell(2);
var el1=document.createElement('input');
el1.type='text';
el1.name='txtRowe'+iteration;
el1.id='txtRowe'+iteration;
el1.size=40;
el1.setAttribute('sumMe',"1");
cellRight2.appendChild(el1);
var cellRightsel=row.insertCell(3);
var sel=document.createElement('select');
sel.name='selRow'+iteration;
sel.options[0]=new Option('10%','value="10"');
sel.options[1]=new Option('20%','value="20"');
sel.options[2]=new Option('30%','value="30"');
cellRightsel.appendChild(sel);
var cellRightsel2=row.insertCell(4);
}
</script>
<script>
function sum(){
var form=document.getElementById('eval_edit');
if(!form) return;
var s1 = 0;
var s2 = 0;
var tbl=document.getElementById('sheet');
var iteration=tbl.rows.length-1;
for(var i=1; i<=iteration; i++){
var el = form['txtRow'+i];
if(!el) continue;
var txt = el.value;
if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
var el2 = form['selRow'+i];
var el3 = document.getElementById('txtRowe'+i);
if(!el2 || !el3) alert('Error in calculating totals');
var percent = Number(el2[el2.selectedIndex].value)/100;
var tax = Number(txt) * percent;
el3.innerHTML = tax.toFixed(2);
s1 += Number(txt);
s2 += tax;
}
if(form['total']){ form['total'].value = s1.toFixed(2); }
if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
}
onload = function(){
sum();
}
</script>
</head>
<body>
<form name="eval_edit" method="POST">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr><td align="center">
<table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
<tr><td>1</td>
<td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
<td><select name="selRow0">
<option value="value="10">10%</option>
<option value="value="20">20%</option>
<option value="value="30">30%</option></select></td></tr></table>
INCOME SUM<input name="total" type="text"/>
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRow()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
</td>
</tr>
</table>
</form>
</body>
</html>
Hi, have table with 5 rows. First 2 rows visible. Last 3 rows hidden - Code: <tr id="row1" style="display: none"> <tr id="row2" style="display: none"> <tr id="row3" style="display: none"> With onclick would like to make those rows visible to user - how can I do that? thank - john I have a temp HTML file that is based the code I found on this site at http://www.codingforums.com/showthread.php?t=103961. It dynamically adds and removes rows from an HTML table with inputs in the cells. I have tweaked my copy a bit to match our needs. Of importance to this post is that column 1 is simply the row number. Unfortunately, I am unable to figure out how to re-sequence the first column if a row is deleted. For example, if there are 4 rows, and I delete row 3, I need to re-sequence (re-number) the values to reflect 1, 2, 3, not 1, 2, 4. Below is the insert logic (which adds a delete button for the row). Code: function insertRow() {
nForm = document.forms[0];
nForm['submit'].disabled = false;
nTable = document.getElementById('worksheet');
var lastRow = nTable.rows.length;
var x = nTable.insertRow(lastRow);
var a = x.insertCell(0);
var b = x.insertCell(1);
var c = x.insertCell(2);
var d = x.insertCell(3);
var e = x.insertCell(4);
var f = x.insertCell(5);
var g = x.insertCell(6);
var h = x.insertCell(7);
var i = x.insertCell(8);
var j = x.insertCell(9);
var k = x.insertCell(10);
var l = x.insertCell(11);
var z = x.insertCell(12);
a.innerHTML="<input type='text' class='PanelNo' name='PanelNo[]' value='"+lastRow+"' readonly>";
b.innerHTML="<input type='text' class='PanelQty' name='PanelQty[]' value='1' onblur='setDefault(this)' onKeyup='verifyNumeric(this)' >";
c.innerHTML="<input type='text' class='PanelThickness' name='PanelThickness[]' onkeyup='verifyNumeric(this)' >";
d.innerHTML="<input type='text' class='PanelWidth' name='PanelWidth[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>";
e.innerHTML="<input type='text' class='PanelHeight' name='PanelHeight[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>";
f.innerHTML="<input type='text' class='FloorElev' name='FloorElev[]' onkeyup='calc(this)' onkeyup='verifyNumeric(this)' >";
g.innerHTML="<input type='text' class='BlockoutSQFootage' name='BlockoutSQFootage[]' align='center' readonly>";
h.innerHTML="<input type='text' class='PanelWeight' name='PanelWeight[]' readonly>";
i.innerHTML="<input type='text' class='TotalCubicYds' name='TotalCubicYds[]' readonly>";
j.innerHTML="<input type='text' class='LiftingInsReq' name='LiftingInsReq[]' readonly>";
k.innerHTML="<input type='text' class='DaytonBraceReq' name='DaytonBraceReq[]' readonly>";
l.innerHTML="<input type='text' class='DaytonBraceQty' name='DaytonBraceQty[]' readonly>";
z.innerHTML="<input type='button' value='Delete' class='button' onclick='deleteRow(this)'>";
}
Here is the logic for deleting a row (dynamically added for each row with the last line in the above code). I have added all the code after the 1st line, but it clearly does not work (but gives no errors): Code: function deleteRow(subjRow) {
subjRow.parentNode.parentNode.parentNode.removeChild(subjRow.parentNode.parentNode);
var PanelNo = document.getElementsByName('PanelNo[]');
NoRows = PanelNo.length;
if (NoRows > 0) {
var temp = new Array();
for (xx1=0; xx1 < NoRows; xx1++) {
temp[xx1] = (xx1+1);
}
// how do I do this?
document.getElementsByName('PanelNo[]').innerHTML = temp;
}
}
I have never worked with arrays like this for dynamic inputs, so any help would be appreciated. Hey guys, I have a table which contains a link to add rows in each row after the header. This link, when clicked, adds a row beneath the row which contained the clicked link. This part works perfectly. However the added rows each have a link to remove themselves from the table, and this is the part which isn't working properly. What's supposed to happen is that you click on a link, and then the row which contains the link you just clicked on is deleted. What's actually happening is when the "remove" links are clicked, first the row 2 rows above it is removed, then the row directly above it, then the correct row (itself) is deleted. Hope all of that makes sense! This is my script: Code: function addRowToTable(thisRow)
{
var tbl = document.getElementById('foodsTable');
addedRow = thisRow + addedRows;
var row = tbl.insertRow(addedRow);
row.id = addedRows;
addedRows = addedRows + 1;
var cellLeft = row.insertCell(0);
cellLeft.innerHTML = " + <input type='text'> <a href='JavaScript:removeRowFromTable(" + row.id + ")'>Remove</a> ";
var cellMiddle = row.insertCell(1);
cellMiddle.innerHTML = "<input type='text'>";
var cellRight = row.insertCell(2);
cellRight.innerHTML = "text here";
}
function removeRowFromTable(i)
{
var tbl = document.getElementById('foodsTable');
document.getElementById('foodsTable').deleteRow(i)
addedRows = addedRows - 1;
}
And this is my table: Code: <table width=100% id="foodsTable">
<tr bgcolor="#EEEEEE">
<td width=*><b>Food/Drink</b></td>
<td align="right" width=100><b>Purchased</b></td>
<td align="right" width=100><b>Produced</b></td>
<td width=60></td>
</tr>
<tr>
<td><a href="itemdetails.php?item=Apples" onMouseover="ddrivetip('<?php getToolTipData('Apples',$Foods); ?>')"; onMouseout="hideddrivetip()">Apples</a>
<a href="JavaScript:addRowToTable(2)">+ Add similar food</a>
<font color="#FF0000">*NEW*</font></td>
<td align="right"><input type="text" name="Apples" maxlength="10" size="10" value="<?php echo $session->foodsApplesPurc; ?>" style="text-align:right" /></td>
<td align="right"><input type="text" name="ApplesProd" maxlength="10" size="10" value="<?php echo $session->foodsApplesProd; ?>" style="text-align:right" /></td>
<td>kg/week</td>
</tr>
<!-- many more rows just like the one above /-->
</table>
I've highlighted the sections which I believe are most likely to be the source of my problems. Please ignore the PHP and mouseover/mouseout parts - I don't think they're relevant to this particular problem. I'm also not bothered at this stage by the fact that I'm not adding enough cells to the new rows - I'll fix this later. At this stage I just want to get the "remove" links to remove their own rows. Any ideas? Knowing me it's most likely a case of me making it way more complicated than it needs to be, and digging myself into a hole! I will be eternally indebted to anyone who can give me any help! Thanks in advance! Hi there, so i am working on a website, and on it there is a video with youtube api. I need to hide all Table-rows that are not during each 5 second time frame. So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40. Each TR displays a start time, content, and end time. Here is what the tables currently look like. Code: <table width="600" class="table" >
<tr class="item-titles">
<td width="75" class="none">Start</td>
<td width="400">Caption</td>
<td width="75">End</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
<td><a href="javascript:player.seekTo(0, false)"></a></td>
<td><a href="javascript:player.seekTo(5, false)">5</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
<td><a href="javascript:player.seekTo(5, false)"></a></td>
<td><a href="javascript:player.seekTo(10, false)">10</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
<td><a href="javascript:player.seekTo(10, false)"></a></td>
<td><a href="javascript:player.seekTo(15, false)">15</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
<td><a href="javascript:player.seekTo(15, false)"></a></td>
<td><a href="javascript:player.seekTo(20, false)">20</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
<td><a href="javascript:player.seekTo(20, false)"></a></td>
<td><a href="javascript:player.seekTo(25, false)">25</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
<td><a href="javascript:player.seekTo(25, false)"></a></td>
<td><a href="javascript:player.seekTo(30, false)">30</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
<td><a href="javascript:player.seekTo(30, false)"></a></td>
<td><a href="javascript:player.seekTo(35, false)">35</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
<td><a href="javascript:player.seekTo(35, false)"></a></td>
<td><a href="javascript:player.seekTo(40, false)">40</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
<td><a href="javascript:player.seekTo(40, false)"></a></td>
<td><a href="javascript:player.seekTo(45, false)">45</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
<td><a href="javascript:player.seekTo(45, false)"></a></td>
<td><a href="javascript:player.seekTo(50, false)">50</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
<td><a href="javascript:player.seekTo(50, false)"></a></td>
<td><a href="javascript:player.seekTo(55, false)">55</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
<td><a href="javascript:player.seekTo(55, false)"></a></td>
<td><a href="javascript:player.seekTo(60, false)">60</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
<td><a href="javascript:player.seekTo(60, false)"></a></td>
<td><a href="javascript:player.seekTo(65, false)">65</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
<td><a href="javascript:player.seekTo(65, false)"></a></td>
<td><a href="javascript:player.seekTo(70, false)">70</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
<td><a href="javascript:player.seekTo(70, false)"></a></td>
<td><a href="javascript:player.seekTo(75, false)">75</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
<td><a href="javascript:player.seekTo(75, false)"></a></td>
<td><a href="javascript:player.seekTo(80, false)">80</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
<td><a href="javascript:player.seekTo(80, false)"></a></td>
<td><a href="javascript:player.seekTo(85, false)">85</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
<td><a href="javascript:player.seekTo(85, false)"></a></td>
<td><a href="javascript:player.seekTo(90, false)">90</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
<td><a href="javascript:player.seekTo(90, false)"></a></td>
<td><a href="javascript:player.seekTo(95, false)">95</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
<td><a href="javascript:player.seekTo(95, false)"></a></td>
<td><a href="javascript:player.seekTo(100, false)">100</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
<td><a href="javascript:player.seekTo(100, false)"></a></td>
<td><a href="javascript:player.seekTo(105, false)">105</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
<td><a href="javascript:player.seekTo(105, false)"></a></td>
<td><a href="javascript:player.seekTo(110, false)">110</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
<td><a href="javascript:player.seekTo(110, false)"></a></td>
<td><a href="javascript:player.seekTo(115, false)">115</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
<td><a href="javascript:player.seekTo(115, false)"></a></td>
<td><a href="javascript:player.seekTo(120, false)">120</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
<td><a href="javascript:player.seekTo(120, false)"></a></td>
<td><a href="javascript:player.seekTo(125, false)">125</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
<td><a href="javascript:player.seekTo(125, false)"></a></td>
<td><a href="javascript:player.seekTo(130, false)">130</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
<td><a href="javascript:player.seekTo(130, false)"></a></td>
<td><a href="javascript:player.seekTo(135, false)">135</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
<td><a href="javascript:player.seekTo(135, false)"></a></td>
<td><a href="javascript:player.seekTo(140, false)">140</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
<td><a href="javascript:player.seekTo(140, false)"></a></td>
<td><a href="javascript:player.seekTo(145, false)">145</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
<td><a href="javascript:player.seekTo(145, false)"></a></td>
<td><a href="javascript:player.seekTo(150, false)">150</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
<td><a href="javascript:player.seekTo(150, false)"></a></td>
<td><a href="javascript:player.seekTo(155, false)">155</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
<td><a href="javascript:player.seekTo(155, false)"></a></td>
<td><a href="javascript:player.seekTo(160, false)">160</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
<td><a href="javascript:player.seekTo(160, false)"></a></td>
<td><a href="javascript:player.seekTo(165, false)">165</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
<td><a href="javascript:player.seekTo(165, false)"></a></td>
<td><a href="javascript:player.seekTo(170, false)">170</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
<td><a href="javascript:player.seekTo(170, false)"></a></td>
<td><a href="javascript:player.seekTo(175, false)">175</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
<td><a href="javascript:player.seekTo(175, false)"></a></td>
<td><a href="javascript:player.seekTo(180, false)">180</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
<td><a href="javascript:player.seekTo(180, false)"></a></td>
<td><a href="javascript:player.seekTo(185, false)">185</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
<td><a href="javascript:player.seekTo(185, false)"></a></td>
<td><a href="javascript:player.seekTo(190, false)">190</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
<td><a href="javascript:player.seekTo(190, false)"></a></td>
<td><a href="javascript:player.seekTo(195, false)">195</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
<td><a href="javascript:player.seekTo(195, false)"></a></td>
<td><a href="javascript:player.seekTo(200, false)">200</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
<td><a href="javascript:player.seekTo(200, false)"></a></td>
<td><a href="javascript:player.seekTo(205, false)">205</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
<td><a href="javascript:player.seekTo(205, false)"></a></td>
<td><a href="javascript:player.seekTo(210, false)">210</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
<td><a href="javascript:player.seekTo(210, false)"></a></td>
<td><a href="javascript:player.seekTo(215, false)">215</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
<td><a href="javascript:player.seekTo(215, false)"></a></td>
<td><a href="javascript:player.seekTo(220, false)">220</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
<td><a href="javascript:player.seekTo(220, false)"></a></td>
<td><a href="javascript:player.seekTo(225, false)">225</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
<td><a href="javascript:player.seekTo(225, false)"></a></td>
<td><a href="javascript:player.seekTo(230, false)">230</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
<td><a href="javascript:player.seekTo(230, false)"></a></td>
<td><a href="javascript:player.seekTo(235, false)">235</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
<td><a href="javascript:player.seekTo(235, false)"></a></td>
<td><a href="javascript:player.seekTo(240, false)">240</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
<td><a href="javascript:player.seekTo(240, false)"></a></td>
<td><a href="javascript:player.seekTo(245, false)">245</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
<td><a href="javascript:player.seekTo(245, false)"></a></td>
<td><a href="javascript:player.seekTo(250, false)">250</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
<td><a href="javascript:player.seekTo(250, false)"></a></td>
<td><a href="javascript:player.seekTo(255, false)">255</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
<td><a href="javascript:player.seekTo(255, false)"></a></td>
<td><a href="javascript:player.seekTo(260, false)">260</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
<td><a href="javascript:player.seekTo(260, false)"></a></td>
<td><a href="javascript:player.seekTo(265, false)">265</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
<td><a href="javascript:player.seekTo(265, false)"></a></td>
<td><a href="javascript:player.seekTo(270, false)">270</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
<td><a href="javascript:player.seekTo(270, false)"></a></td>
<td><a href="javascript:player.seekTo(275, false)">275</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
<td><a href="javascript:player.seekTo(275, false)"></a></td>
<td><a href="javascript:player.seekTo(280, false)">280</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
<td><a href="javascript:player.seekTo(280, false)"></a></td>
<td><a href="javascript:player.seekTo(285, false)">285</td>
</tr>
</table>
And you can see the page at http://134.117.226.43:8000/check_sub...ty/test101/91/ any help ? I am trying to select multiple <tr>'s (onclick) in a <table> and then move every selected <tr> to another location in the table (on click). I will also be adding functionality to delete specific rows from a table by clicking on a <td> element, though I've already done this by doing. document.getElementById("container").deleteRow(row.parentNode.rowIndex); I am just completely unsure of how to tackle storing each selected row -- and then moving each selected row elsewhere in the table. I've seen many examples that accomplish close to what I am trying to acheive, however, they are all done via drag and drop and do not allow selecting multiple rows. |
|||||||