Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: table update

  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    table update

    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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I think this is what you want or at lest it's close to it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    </head>
    <body>
    
    <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="button" value="Update" onclick="updateTable();"/><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"/>
    <div id="err" style="color:Red;"></div>
    <br/>
    
    <table border="1" width="50%" id="score">
    <thead>
    <tr>
    <th>Team</th>
    <th>Point</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Team 1</td>
    <td id="team_1">30</td>
    </tr>
    <tr>
    <td>Team 2</td>
    <td id="team_2">20</td>
    </tr>
    <tr>
    <td>Team 3</td>
    <td id="team_3">10</td>
    </tr>
    </tbody>
    </table>
    
    <script type="text/javascript">
    function updateTable(){
    document.getElementById('err').innerHTML = '';
    var firstdrop = document.getElementById("first").value;
    var seconddrop = document.getElementById("second").value;
    var box1 = Number(document.getElementById("txtbox1").value);
    var box2 = Number(document.getElementById("txtbox2").value);
    var tablebox1 = Number(document.getElementById(firstdrop).innerHTML);
    var tablebox2 = Number(document.getElementById(seconddrop).innerHTML);
    
    	if((firstdrop == '') || (seconddrop == '')){
    		document.getElementById('err').innerHTML = 'Must enter both scores.';
    	}
    
    	if(firstdrop != seconddrop){
    		if(box1 > box2){
    			document.getElementById(firstdrop).innerHTML = tablebox1 + 3;
    		}else if(box1 < box2){
    			document.getElementById(seconddrop).innerHTML = tablebox2 + 3;
    		}else{
    			document.getElementById(firstdrop).innerHTML = tablebox1 + 1;
    			document.getElementById(seconddrop).innerHTML = tablebox2 + 1;
    		}
    	}else{
    		document.getElementById('err').innerHTML = 'Must select two different teams.';
    	}
    }
    </script>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    Lexium (05-05-2013)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    First of all thank sunfighter, but I still got problem for the validation of the two textbox...even though I select two different from the two dropdown and let the two textbox null value...it increment the value of the two team selected by 1 in the table.

    function updateTable(){
    document.getElementById('err').innerHTML = '';
    var firstdrop = document.getElementById("first").value;
    var seconddrop = document.getElementById("second").value;
    var box1 = Number(document.getElementById("txtbox1").value);
    var box2 = Number(document.getElementById("txtbox2").value);
    var tablebox1 = Number(document.getElementById(firstdrop).innerHTML);
    var tablebox2 = Number(document.getElementById(seconddrop).innerHTML);

    if(box1 == "" || box1==null && box2 == "" || box2==null){
    document.getElementById('err').innerHTML = 'Must enter both scores.';
    document.getElementById(firstdrop).innerHTML = tablebox1 + 0;
    document.getElementById(seconddrop).innerHTML = tablebox2 + 0;
    }


    if(firstdrop==seconddrop){
    document.getElementById('err').innerHTML = 'Must select two different teams.';
    }

    else if(firstdrop != seconddrop){
    if(box1 > box2){
    document.getElementById(firstdrop).innerHTML = tablebox1 + 3;
    }

    else if(box1 < box2){
    document.getElementById(seconddrop).innerHTML = tablebox2 + 3;
    }

    else if(box1 == box2){
    document.getElementById(firstdrop).innerHTML = tablebox1 + 1;
    document.getElementById(seconddrop).innerHTML = tablebox2 + 1;
    }
    }
    }
    Last edited by Lexium; 05-05-2013 at 01:12 PM.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Thought mine worked for that... Ok test this one, worked for me, but didn't test exclusively:
    Code:
    <script type="text/javascript">
    function updateTable(){
    document.getElementById('err').innerHTML = '';
    var firstdrop = document.getElementById("first").value;
    var seconddrop = document.getElementById("second").value;
    var temp1 = document.getElementById("txtbox1").value;
    var box1 = Number(temp1);
    var temp2 = document.getElementById("txtbox2").value;
    var box2 = Number(temp2);
    var tablebox1 = Number(document.getElementById(firstdrop).innerHTML);
    var tablebox2 = Number(document.getElementById(seconddrop).innerHTML);
    
    	if(temp1 == ''  || temp2 == ''){
    		document.getElementById('err').innerHTML = 'Must enter both scores.';
    		return;
    	}
    
    	if(firstdrop != seconddrop){
    		if(box1 > box2){
    			document.getElementById(firstdrop).innerHTML = tablebox1 + 3;
    		}else if(box1 < box2){
    			document.getElementById(seconddrop).innerHTML = tablebox2 + 3;
    		}else{
    			document.getElementById(firstdrop).innerHTML = tablebox1 + 1;
    			document.getElementById(seconddrop).innerHTML = tablebox2 + 1;
    		}
    	}else{
    		document.getElementById('err').innerHTML = 'Must select two different teams.';
    	}
    }
    </script>

  • Users who have thanked sunfighter for this post:

    Lexium (05-05-2013)

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thx for helping me dude...I really appreciate...
    It works now...one last thing..can you name me the best book to learn javascript DOM?
    Last edited by Lexium; 05-05-2013 at 08:05 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I stopped using books when people started posting info on the web. If you don't mind using the web you can find a start to js here http://www.w3schools.com/jsref/default.asp and here https://developer.mozilla.org/en-US/docs/JavaScript

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Quote Originally Posted by sunfighter View Post
    Best avoid that one - about half of the JavaScript pages there ceased to be relevant when Netscape 4 dies. The two guys that own the site haven't been able to keep it up to date.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    how to set an id to a particular <td> ( not all the <td> but only one) in a dynamic table?

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Quote Originally Posted by Lexium View Post
    how to set an id to a particular <td> ( not all the <td> but only one) in a dynamic table?
    It depends on exactly how you are going to identify the particular td.

    If you want to set an id of 'x' on the third td in the second rrow of a table with an id of 't' then you could use:

    document.getElementById('t').rows[1].cells[2].id = 'x';

    or if the table has column headings and you want the second row of data then use:

    document.getElementById('t').tbodies[0].rows[1].cells[2].id = 'x';
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    and what if I want to set the id of that particular <td> using DOM scripting?

    var arrseasons = ['winter','autumn','summer','spring'];

    arrseasons.forEach(function(key){
    var td = document.createElement('td');
    var text =document.createTextNode('key')
    td.appendChild(text);
    tr.appendChild(td);
    });
    Ok,suppose I want the id for <td> spring to be 'x'...how am I going to do that?
    td.setAttribute("id",'x'); will set all the <td> id to 'x'...any help?

  • #11
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    referring to my first post what if I got another column for win and want to update it.For instance

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    	<form>
    
    <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="button" value="Update" onclick="updateTable();"/><br/>
    <label for="score">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"/>
    <br/>
    </form>
    
    <table border="1" width="50%" id="score">
    <thead>
    <tr>
    <th>Team</th>
    <th>Win</th>
    <th>Point</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Team 1</td>
    <td id="win">5</td>
    <td id="point">30</td>
    </tr>
    <tr>
    <td>Team 2</td>
    <td id="win">10</td>
    <td id="point">20</td>
    </tr>
    <tr>
    <td>Team 3</td>
    <td id="win">15</td>
    <td id="point">10</td>
    </tr>
    </tbody>
    </table>
    I know it's the same apply for the point update but I still have difficulties about the innerHTML.How to modify this?

    Code:
    var firstdrop = document.getElementById("first").value;
    var seconddrop = document.getElementById("second").value;
    var temp1 = document.getElementById("txtbox1").value;
    var box1 = Number(temp1);
    var temp2 = document.getElementById("txtbox2").value;
    var box2 = Number(temp2);
    var win = Number(document.getElementById("win").value);
    var point = Number(document.getElementById("point").value);
    
    if(firstdrop != seconddrop){
    		if(box1 > box2){
    			document.getElementById(firstdrop).innerHTML = point + 3;
                            document.getElementById(firstdrop).innerHTML = win + 1;
    		}
    
    		else if(box1 < box2){
    			document.getElementById(seconddrop).innerHTML = point + 3;
                            document.getElementById(seconddrop).innerHTML = win + 1;
    		}
    
    		else if(box1 == box2){
    			document.getElementById(firstdrop).innerHTML = point + 1;
    			document.getElementById(seconddrop).innerHTML = point + 1;
    		}

  • #12
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    referring to my first post what if I got another column for win and want to update it.For instance

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    	<form>
    
    <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="button" value="Update" onclick="updateTable();"/><br/>
    <label for="score">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"/>
    <br/>
    </form>
    
    <table border="1" width="50%" id="score">
    <thead>
    <tr>
    <th>Team</th>
    <th>Win</th>
    <th>Point</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Team 1</td>
    <td id="win">5</td>
    <td id="point">30</td>
    </tr>
    <tr>
    <td>Team 2</td>
    <td id="win">10</td>
    <td id="point">20</td>
    </tr>
    <tr>
    <td>Team 3</td>
    <td id="win">15</td>
    <td id="point">10</td>
    </tr>
    </tbody>
    </table>
    I know it's the same apply for the point update but I still have difficulties about the innerHTML.How to modify this?

    Code:
    var firstdrop = document.getElementById("first").value;
    var seconddrop = document.getElementById("second").value;
    var temp1 = document.getElementById("txtbox1").value;
    var box1 = Number(temp1);
    var temp2 = document.getElementById("txtbox2").value;
    var box2 = Number(temp2);
    var win = Number(document.getElementById("win").value);
    var point = Number(document.getElementById("point").value);
    
    if(firstdrop != seconddrop){
    		if(box1 > box2){
    			document.getElementById(firstdrop).innerHTML = point + 3;
                            document.getElementById(firstdrop).innerHTML = win + 1;
    		}
    
    		else if(box1 < box2){
    			document.getElementById(seconddrop).innerHTML = point + 3;
                            document.getElementById(seconddrop).innerHTML = win + 1;
    		}
    
    		else if(box1 == box2){
    			document.getElementById(firstdrop).innerHTML = point + 1;
    			document.getElementById(seconddrop).innerHTML = point + 1;
    		}

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    forum email sent

  • Users who have thanked sunfighter for this post:

    Lexium (05-12-2013)

  • #14
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thank you dude for your guideline...It's a bit bulky but it works.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •