JavaScript - How To Insert Last Input As First Table Record In Table

Can anyone give me some advice on how to manipulate Google Fusion Table using Javascript??? I've read the Fusion table's Developer Guider. But still feel confused.
Can anyone tell me the specific solution?? Or give me a sample code??

Thanks very much!!!!!!

Hi all,

What I am trying to achieve.
I have a php page that has a button on it when clicked shows a div (previously hidden) in the middle of the page this div contains a table with rows.
Each row has an image acting as a button and a series of fields that are populated from a database.

One of the fields is a quantity box I want to be able to change the value in this box and click on the submit img and have it submit this info (including the altered quantity) back to the php page or to the submit function so that I can then access the values.

I have absolutly no idea how to start this. I have very limited javascript experience.

the submit looks something like (at the moment)
Code:

echo '<a href="#" onclick="javascript: document.getElementById(\'stockitemid\').value = '.$stockline->purchaseitemid.'; submitbutton(\'addLineFromStock\')" >'.$purchaseLineImg.'</a>';

and then I was trying to alert in the submit function
something like:
Code:

alert(document.getElementById('stockitemid').value);

my div td fields look like
Code:

<td>
<input type="text" size="3" name="sid[<?php echo $stockline->purchaseitemid; ?>]" id="stockitemid<?php echo $count; ?>" value="<?php echo $stockline->purchaseitemid; ?>" />
</td>
<td>
<input type="text" size="3" name="stockqty[<?php echo $stockline->purchaseitemid; ?>]" id="stockquantity" value="<?php echo $stockline->quantitysupplied; ?>" />
</td>

Any help would be greatly appreciated

Thanks
Kate

Hi, I'm very new to Javascript and I'm stuck. I am trying to create a js script that will prompt the user for a times table (example the 5 times table, the 7 times table, etc.) & prompt the user for 2 more values; the 'start' number and 'end' number. So there would be 3 numbers total the user must input. The script should present a 'warning' message if the user inputs letters or negative numbers. I have come very close to getting it too work but can't quite get past the last hurdle. Upon entering the 3 numbers, the output should look similar to this: (the 5 times table starting with 1 and ending with 12)
The 5 times table
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45
5 * 10 = 50
5 * 11 = 55
5 * 12 = 60

I have placed the js script code on pastebin.com and below. The pastebin link is: http://pastebin.com/2NZPiFH9

Code:

function writeTimesTable(timesTable, timesByStart, timesByEnd)
{
   for (;timesByStart <= timesByEnd; timesByStart++)
   {
      document.write(timesTable + " * " + timesByStart + " = " +
         timesByStart * timesTable + "<br>");
   }
}
    
var timesTable;
    
while ( (timesTable = prompt("Enter the first number in the times table.  Enter -1 to exit.", -1)) != -1)
{
   while (isNaN(timesTable) == true)
   {
    timesTable = prompt(timesTable + " is not a valid number, please retry.",-1);

   }
    
   if (timesTable == -1)
   {
      break;
   }
    
   document.write("<br>The " + timesTable + " times table<br>");
   writeTimesTable(timesTable,1,12);
    
}

My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

Code:

<script type="text/javascript">
  addLoadEvent(function() { function1(1); })
  //function1 makes the table rows do something appearance wise.
</script>

<tr>
  <td></td>
  <td></td>
  <td>
    <img src="pics/delete.png" alt="Delete" onclick="function2();">
  </td>
</tr>

I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

hi guys i having some problems with jquery plugin table sorter on a dynamic table.
if i use it on a regular html table it works fine,but on my dynamic table its not working.
if someone could look at my code and see if i done something wrong i would appreciate it .

Thanks will43
Code:

<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script> 
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script  type="text/javascript"/>
$(document).ready(function()    
 {   
 $("#myTable").tablesorter();    
  }
   ); 
</script>

 <form id="form1" name="form1" method="post" action="">
      <label for="Position">Position</label>
      <select name="Position" id="Position">
        <option>QB</option>
        <option>HB</option>
        <option>FB</option>
        <option>WR</option>
        <option>TE</option>
        <option>RG</option>
        <option>RT</option>
        <option>C</option>
        <option>LG</option>
        <option>LT</option>
        <option>CB</option>
        <option>LB</option>
        <option>SS</option>
        <option>FS</option>
        <option>DE</option>
        <option>DT</option>
        <option>P</option>
        <option>K</option>
      </select>
      <input type="submit" name="Summit" id="Summit" value="Submit" />
    </form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
      <thead>
      <tr>
        <th bgcolor="#FF0000">id</th>
        <th bgcolor="#FF0000">Team</th>
        <th bgcolor="#FF0000">FirstName</th>
        <th bgcolor="#FF0000">LastName</th>
        <th bgcolor="#FF0000">Position</th>
        <th bgcolor="#FF0000">Year</th>
        <th bgcolor="#FF0000">Overall</th>
        <th bgcolor="#FF0000">Speed</th>
      </tr>
      </thead>
      <?php do { ?>
      <tbody>
        <tr>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
        </tr>
        </tbody>
        <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
    </table>

hi all,

i have a table, just a basic table with 6 rows.

depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one.

the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc....

i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it.

hope that makes sense.

my entire test page is:
(click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2)
--------------------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	
<script type="text/javascript">
	function reformatMe() {
	    var divObj = document.getElementById('reformatMe');
	    var numRows = document.getElementsByTagName("tr");
	    var z = "1";
	    for (i = 0; i < numRows.length; i++) {
	        if (numRows[i].childNodes[0].innerHTML == "2") {
	            var markStart = numRows[i];
	            alert(markStart.nextSibling);	        	        
	            var closeTable = document.createElement("/table");
	            var addTable = document.createElement("table");
	            //var tbody = document.createElement("tbody");
	            //addTable.appendChild(tbody);
	            addTable.setAttribute("id", "subOptionID" + z);
	                if(numRows[i+1] != null){
	                    numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
	                }
	            z++;
	        }
	    }
	    alert(divObj.innerHTML);
	}
</script>
	
</head>

<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
	<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">							
		<tr><td>1</td>	<td>1</td>	<td>How would you like your food prepared?</td>	<td>1</td>	<td>1</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Choose two of the following sides</td>	<td>0</td>	<td>2</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>What do you want on your Baked Potato?</td>	<td>0</td>	<td>2</td>	<td>1</td></tr>
		<tr><td>2</td>	<td>1</td>	<td>What type of dressing do you want on your salad?</td>	<td>1</td>	<td>1</td>	<td>1</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Do you want fries?</td>	<td>1</td>	<td>1</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Do you want ketchup on your fries?</td>	<td>1</td>	<td>1</td>	<td>1</td></tr>
	</table>
</div>	
</body>
</html>

hi,

On my mobile app, the 2nd input box isn't working as it should?!

it's called weight1

can someone please help, here is my code:

Code:

<!doctype html>
<html>
    <head>
       
        <title>myBMI</title>
        <script type="text/javascript" charset="utf-8">
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
      html5rocks.webdb.open = function() {
        var dbSize = 5 * 1024 * 1024; // 5MB
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
      }
      
      html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, added_on DATETIME)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1");
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, added_on) VALUES (?,?,?)",
              [todoText, weight1, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM bmical", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      html5rocks.webdb.deleteTodo = function(id) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
          });
      }
      
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        }
      
        todoItems.innerHTML = rowOutput;
      }
      
      function renderTodo(row) {
        return "<li>" + row.height1  + row.weight1 + row.added_on + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";
      }
      
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.createTable();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      function addTodo() {
        var height1 = document.getElementById("height1");
        html5rocks.webdb.addTodo(height1.value);
        height1.value = "";
      }
    </script>
</head>
<body onload="init();">
                <p>Please enter daily your stats below</p>
                <ul id="todoItems">
			    </ul>
			    <form type="post" onsubmit="addTodo(); return false;">
			    <ul class="individual">
			      <li><input type="text" class="submit" id="height1" name="height1" placeholder="Height" /></li>
			      <li><input type="text" class="submit" id="weight1" name="weight1" placeholder="Weight" /></li>
			    </ul>
			      <input type="submit" value="Add Todo Item"/>
			    </form>
        </body>
</html>

How do I insert this javascript: <script language="JavaScript" type="text/javascript" src="http://www.ABC.com/members/display.php?token=email"></script>

Into the values of this:
<input id="Email" name="Email" type="text" size="30" /><input name="emailagent" type="HIDDEN" class="textfield" id="emailagent" value=''INSERT JAVASCRIPT" />

I have a master page with a table that contains main content and side bar content. The main content is where the different pages of the site are shown, and the side bar content has stuff like email and friends lists.

The mail list is on a model popup and when opened will ajax populate the table with rows containing image, subject, sender, time, all in different td's. When I click a row, the message pops up. From the message I can choose to reply or delete. When I delete I want to fade out the row that was deleted. I can wait the 10 seconds until the list does a refresh but I would rather have this cool visual effect.

My problem is I am having difficulty selecting the tr I want. My table has an id of MainMailTable and when I check it does not have the ct100: added in front.

Here is what I am trying:
Code:

$('#MainMailTable:tr:has(td:contains(' + subject + '))').fadeOut(1000);

I am trying to find the row that contains the subject of the message I want to delete. I guess that isnt really unique, and maybe I should add a hidden td with an id to the row (can Jquery get a hidden field?). But I would like to be able to get this first step to work.

When I try:

Code:

$('tr:has(td:contains(' + subject + '))').fadeOut(1000);

the whole page disappears, so I think I may be close.

Thank you in advance for any assistance.

I've tried using this to do it, but it isn't working...

string.replace(/(<table([^>]+)table>)/ig,"");

Hi,

How I build a table based on a list under a <DIV></DIV> like this?

printing: 1
and: 3
typesetting: 2
industry: 2
has: 2
been: 1
s: 1
standard: 1
ever: 1
since: 1
1500s: 1
when: 1
an: 1
unknown: 1
printer: 1
took: 1
a: 2
galley: 1
type: 3
scrambled: 1

Regards

Bob

Hi,
I would like to increase my table row when users hit enter. Please find my html code below.
Code:

<form id="form1" name="form1" method="post" action="">
                    <table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" id="tblSample">
                      <tr>
                        <td align="center"><strong>NO</strong></td>
                        <td align="center"><strong>DESCRIPTION</strong></td>
                        <td align="center"><strong>QTY</strong></td>
                        <td align="center"><strong>PRICE</strong></td>
                        <td align="center"><strong>TOTAL</strong></td>
                      </tr>
                      <tr>
                        <td align="center"><label>
                          <input name="textfield2" type="text" id="textfield2" size="8" />
                        </label></td>
                        <td align="center"><label>
                          <input name="textfield" type="text" id="textfield" onclick="addRowToTable();" size="80"/>
                        </label></td>
                        <td align="center"><input name="textfield3" type="text" id="textfield3" size="8" /></td>
                        <td align="center"><input name="textfield4" type="text" id="textfield4" size="8" /></td>
                        <td align="center"><input name="textfield5" type="text" id="textfield5" size="8" /></td>
                      </tr>
                      <tr>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">total</td>
                      </tr>
                    </table>
                  </form>

Code:

rownumber = 2;

detailsTable = document.getElementsByName("detailsTable");
detailsRow = detailsTable.getElementsByTagName("tr")[rownumber];
		
	name = detailsRow.getElementsbyTagName("td")[0];
	address = detailsRow.getElementsbyTagName("td")[1];
	address2 = detailsRow.getElementsbyTagName("td")[2];
	phone = detailsRow.getElementsbyTagName("td")[3];
	email = detailsRow.getElementsbyTagName("td")[4];


alert(name);

I have been told if I want to get the text from each cell I can use:

alert(name.firstChild.nodeValue);

But I don't understand how to do this for what I am wanting to do.

Here is my HTML:

Code:

	
<table border="0" name="detailsTable">
<tr>
	<td>a</td>
	<td>b</td>
	<td>c</td>
	<td>d</td>
	<td>e</td>
		
</tr>
					
</table>

Hello there, I'm an IT student that recently started to learn JavaScript. I'm trying to write a code that starts with a prompt inputs a number like n. Then the code will ask another n prompts for data input. For example I will input 5 for first prompt, code will ask for 5 more prompts for input. Can't figure out how to do it

Hi all,
I need some help to update my table.It consists about selecting one team from each two drop-down list and enter the score to the two textbox.
Textbox 1 relate to the team selected from the first drop-down list and textbox2 relate to the team selected from the second drop-down list.If the score entered in textbox1 is greater than textox2 means that team selected from the first drop-down win and need to update the point of the related team in the table.

win = 3 point
draw = 1 point
lost = 0 point

Here what I have down so far...any idea or referencing how I can tackle this task?

Code:

<form id="foot">
    		<label for="first">Please select the first team:</label>
    		    <select id="first">
    		    	<option value="team 1">team 1</option>
                    <option value="team 2">team 2</option>
                    <option value="team 3">team 3</option>
		        </select>

		        <label for="second">Please select the second team:</label>
    		    <select id="second">
    		    	<option value="team 1">team 1</option>
                    <option value="team 2">team 2</option>
                    <option value="team 3">team 3</option>
		        </select>
		        <input type="submit" value="Update"/><br/>

		        <label for="username">Enter score for the match (First team and Second team)</label>
    		    <input type="text" id="txtbox1" size="2"/>
    		    <input type="text" id="txtbox2" size="2"/>

    	</form><br/>
    	<table border="1" width="50%" id="score">
    		<thead>
    			<tr>
    				<th>Team</th>
    				<th>Point</th>
    			</tr>

    			<tbody>
    				<tr>
    					<td>Team 1</td>
    					<td>30</td>
    				</tr>

    				<tr>
    					<td>Team 2</td>
    					<td>20</td>
    				</tr>

    				<tr>
    					<td>Team 3</td>
    					<td>10</td>
    				</tr>

    			</tbody>

    		</thead>

    	</table>

function updateTable(){
var form = document.getElementById("foot");
var firstdrop = document.getElementById("first");
var seconddrop = document.getElementById("second");
var box1 = ParseInt(document.getElementById("txtbox1").value);
var box2 = ParseInt(document.getElementById("txtbox2").value);
var table = document.getElementById("score");

arrwin = ["3"];
arrdraw = ["1"];
arrlost = ["0"];



}

</script>