Jump to content

desperate for help switching td's

neller

By neller
in Javascript Help

 Share

Recommended Posts

neller Member

neller

Posted
Posted
I have my football team (liverpool) in a SQL database my script gets the teams and players from the
database and all the players stats (rating,age,condition etc) and puts them into Td's
like below

what i need is when i want to switch 1 player for another example if i wanted to put finnan in goal
as number 1 when i click on his name then click on reinas name i need there names and stats
to switch places but the number 1,2,3 etc to stay were it is

would be very gratefull for some help



<table>
<tr>
<td>1</td> <td>Reina</td> <td>GK</td> <td></td>92<td> 100</td>
</tr>
<tr>
<td>2</td> <td>Finnan</td> <td>RB</td> <td></td>89<td> 100</td>
</tr>
<tr>
<td>3</td> <td>Risse</td> <td>LB</td> <td></td>91<td> 100</td>
</tr>
<tr>
<td>4</td> <td>Caragher</td> <td>CB</td> <td></td>94<td> 100</td>
</tr>
<tr>
<td>5</td> <td>Hyypia</td> <td>CB</td> <td></td>88<td> 100</td>
</tr>
<tr>
<td>6</td> <td>Gerrard</td> <td>RM</td> <td></td>97<td> 100</td>
</tr>
<tr>
<td>7</td> <td>Sissoko</td> <td>CM</td> <td></td>91<td> 100</td>
</tr>
<tr>
<td>8</td> <td>Alonso</td> <td>CM</td> <td></td>95<td> 100</td>
</tr>
<tr>
<td>9</td> <td>Kewell</td> <td>LM</td> <td></td>90<td> 100</td>
</tr>
<tr>
<td>10</td> <td>Crouch</td> <td>CF</td> <td></td>90<td> 100</td>
</tr>
<tr>
<td>11</td> <td>Fowler</td> <td>ST</td> <td></td>89<td> 100</td>
</tr>
</table>
Link to comment
Share on other sites
  • 3 weeks later...
GBS Member

GBS

Posted
Posted
Hi there,

Here how I would do that kind of things,,
[code]
<html>
<head>
<title>testing,,,</title>
</head>
<body>
<table>
<tr>
<td id="player1" style="cursor:pointer;" onclick="permute_number(1)" >1</td> <td id="name1" style="cursor:pointer;" onclick="permute_name('name1',1);" value="Reina">Reina</td> <td id="code1">GK</td> <td id="var_a_1">92</td><td id="var_b_1"> 100</td>
</tr>
<tr>
<td id="player2" style="cursor:pointer;" onclick="permute_number(2)" >2</td> <td id="name2" style="cursor:pointer;" onclick="permute_name('name2',2);" value="Finnan">Finnan</td> <td id="code2">RB</td> <td id="var_a_2">89</td><td id="var_b_2"> 100</td>
</tr>
<tr>
<td id="player3" style="cursor:pointer;" onclick="permute_number(3)" >3</td> <td id="name3" style="cursor:pointer;" onclick="permute_name('name3',3);" value="Risse">Risse</td> <td id="code3">LB</td> <td id="var_a_3">91</td><td id="var_b_3"> 100</td>
</tr>
</table>

<script>
function permute_number(id)
{
var Number=prompt("Enter the number you want to permute:","");
var varnum=isNaN(Number);
var nb=parseInt(Number,0);

if (varnum==false && nb>0 && nb<12)
    {
// varnum is a correct number,, we call the permutation function
    DoPermutation(nb,id);
    }
else
    {
    alert('hmm,... we need a correct number (1-11)');
    }
}

function DoPermutation(nb,id)
{
// player2 is the 'destination'
// player1 is the 'source'
    var player2_name = "name"+nb;
    var player1_name = "name"+id;

    if (player1_name == player2_name); // no need to do changes, same name for player1 & player2
    else
        {
// we assign some values
        var player2_code = "code"+nb;
        var player2_var_a = "var_a_"+nb;
        var player2_var_b = "var_b_"+nb;

        var player1_code = "code"+id;
        var player1_var_a = "var_a_"+id;
        var player1_var_b = "var_b_"+id;

// we store some old values before to change them
        var oldname=eval("document.getElementById('"+player2_name+"').innerHTML");
        var oldcode=eval("document.getElementById('"+player2_code+"').innerHTML");
        var oldvar_a=eval("document.getElementById('"+player2_var_a+"').innerHTML");
        var oldvar_b=eval("document.getElementById('"+player2_var_b+"').innerHTML");

// we do the permutation
        eval("document.getElementById('"+player2_name+"').innerHTML=document.getElementById('"+player1_name+"').innerHTML");
        eval("document.getElementById('"+player2_code+"').innerHTML=document.getElementById('"+player1_code+"').innerHTML");
        eval("document.getElementById('"+player2_var_a+"').innerHTML=document.getElementById('"+player1_var_a+"').innerHTML");
        eval("document.getElementById('"+player2_var_b+"').innerHTML=document.getElementById('"+player1_var_b+"').innerHTML");

// we restore the old values
        eval("document.getElementById('"+player1_name+"').innerHTML=oldname");
        eval("document.getElementById('"+player1_code+"').innerHTML=oldcode");
        eval("document.getElementById('"+player1_var_a+"').innerHTML=oldvar_a");
        eval("document.getElementById('"+player1_var_b+"').innerHTML=oldvar_b");

// & we set new values for player1's & player2's name
        eval("document.getElementById('"+player1_name+"').setAttribute('value','"+oldname+"')");
        eval("document.getElementById('"+player2_name+"').setAttribute('value',document.getElementById('"+player2_name+"').innerHTML)");
    }
}

function permute_name(nameid,id)
{
var name_b=prompt("Enter the name you want to permute:","");
var name_a=eval("document.getElementById('"+nameid+"').getAttribute('value')");

name_a=name_a.toLowerCase();
name_b=name_b.toLowerCase();

var found="not";

if (isNaN(name_b)==true)
    {
    if (name_a==name_b); // no need to permute,, same names
    else
        {
        for (i=1;i<4;i++) // looping between number 1 to 4 (need to be changed to '<12' for your final script)
            {
            var searching_val=eval("document.getElementById('name"+i+"').getAttribute('value')");
            if (name_b==searching_val.toLowerCase())
                {
// we found an existing name
                found="ok";
// & we get his number
                var nb=eval("document.getElementById('player"+i+"').innerHTML");
                break;
                }
            }

        if (found=="ok")
            {
// we call the function to do the permutation
            DoPermutation(nb,id)
            }
        else
            {
            alert('hmm,... we need a correct name');
            }
        }
    }
else //number typed, as we asked for a string/name
    {
    alert('hmm,... we need a correct name');
    }
}
</script>
</body>
</html>
[/code]
The code works for 'player 1' to 'player 3',, but following the <td>construction, it's quite easy to add some more players,
Once the 11 players/td sets, you could then change the line:
for (i=1;i<4;i++)
into:
for (i=1;i<[b]12[/b];i++)

Good luck & hoping it helps,,

l8tr,,
Link to comment
Share on other sites
buceta Newbie

buceta

Posted
Posted
[!--quoteo(post=370483:date=May 2 2006, 03:03 AM:name=GBS)--][div class=\'quotetop\']QUOTE(GBS @ May 2 2006, 03:03 AM) [snapback]370483[/snapback][/div][div class=\'quotemain\'][!--quotec--]
lol,,,,,,,

buceta,,
have you heard of some words like 'php/mysql' or even 'Ajax'....? :D

<?
change order,,
submiting,,,,,,,,,,,,,,,,,,
replace & save changes in DB !
?>

l8tr,, :)
[/quote]

Off course, php and ajax , but how to know the new order if you change only the table?

The main question is: How to grabbe the new order in your php? I cant see this in my mind.
Link to comment
Share on other sites
GBS Member

GBS

Posted
Posted
Let's try that one,, :)

First, we create a database called 'testing', & add this sql request:
[code]
CREATE TABLE `team` (
  `player_number` varchar(5) NOT NULL default '0',
  `player_name` varchar(25) NOT NULL default '0',
  `player_code_a` varchar(5) NOT NULL default '0',
  `player_code_b` varchar(5) NOT NULL default '0',
  `player_code_c` varchar(5) NOT NULL default '0',
  PRIMARY KEY  (`player_number`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `team` VALUES ('1', 'Reina', 'GK', '92', '100');
INSERT INTO `team` VALUES ('2', 'Finnan', 'RB', '89', '100');
INSERT INTO `team` VALUES ('3', 'Risse', 'LB', '91', '100');
INSERT INTO `team` VALUES ('4', 'Caragher', 'CB', '94', '100');
INSERT INTO `team` VALUES ('5', 'Hyypia', 'CB', '88', '100');
INSERT INTO `team` VALUES ('6', 'Gerrard', 'RM', '97', '100');
INSERT INTO `team` VALUES ('7', 'Sissoko', 'CM', '91', '100');
INSERT INTO `team` VALUES ('8', 'Alonso', 'CM', '95', '100');
INSERT INTO `team` VALUES ('9', 'Kewell', 'LM', '90', '100');
INSERT INTO `team` VALUES ('10', 'Crouch', 'CF', '90', '100');
INSERT INTO `team` VALUES ('11', 'Fowler', 'ST', '89', '100');
[/code]
Then, the html part could be:
[code]
<?
// CONNEXION
$db_link=mysql_connect("localhost", "root", "mypass");
mysql_select_db("testing");
// getting database values
$result = mysql_query("SELECT * FROM team");
$i=1;
// storing values into a php array
if(mysql_num_rows($result)>=1)
    {
    while($row = mysql_fetch_array($result))
        {
        $i++;
            $player_number[$i]=$row['player_number'];
            $player_name[$i]=$row['player_name'];
            $player_code_a[$i]=$row['player_code_a'];
            $player_code_b[$i]=$row['player_code_b'];
            $player_code_c[$i]=$row['player_code_c'];
        }
    }
mysql_close($db_link);
?>

<html>
<head>
<title>testing,,,</title>
</head>
<body>

<script>

var contents="";

// passing the php array to javascript array
var player_number=new Array('<?echo implode("','",$player_number);?>');
var player_name=new Array('<?echo implode("','",$player_name);?>');
var player_code_a=new Array('<?echo implode("','",$player_code_a);?>');
var player_code_b=new Array('<?echo implode("','",$player_code_b);?>');
var player_code_c=new Array('<?echo implode("','",$player_code_c);?>');

for (i=0;i<11;i++)
    {
// little correction with the 'j' variable,, (array id changed after passing php to javascript)
    j=i+1;
    contents=contents+"<tr><td id=\"player"+j+"\" style=\"cursor:pointer;\" onclick=\"permute_number("+j+")\" >"+j+"</td>";
    contents=contents+"<td id=\"name"+j+"\" style=\"cursor:pointer;\" onclick=\"permute_name('name"+j+"',"+j+");\"";
    contents=contents+" value= \""+player_name[i]+"\">"+player_name[i]+"</td>";
    contents=contents+"<td id=\"code"+j+"\">"+player_code_a[i]+"</td>";
    contents=contents+"<td id=\"var_a_"+j+"\">"+player_code_b[i]+"</td>";
    contents=contents+"<td id=\"var_b_"+j+"\">"+player_code_c[i]+"</td></tr>";
</script>

<table id="table_team" border=1>
</table>

<script>
document.getElementById('table_team').innerHTML=contents;

function permute_number(id)
{
var Number=prompt("Enter the number you want to permute:","");
var varnum=isNaN(Number);
var nb=parseInt(Number,0);

if (varnum==false && nb>0 && nb<12)
    {
// varnum is a correct number,, we call the permutation function
    DoPermutation(nb,id);
    }
else if ((varnum==false && (nb<0 || nb>12)) || varnum==true)
    {
    alert('hmm,... we need a correct number (1-11)');
    }
}

function DoPermutation(nb,id)
{
// player2 is the 'destination'
// player1 is the 'source'
    var player2_name = "name"+nb;
    var player1_name = "name"+id;

    if (player1_name == player2_name); // no need to do changes, same name for player1 & player2
    else
    {
// we assign some values
        var player2_code = "code"+nb;
        var player2_var_a = "var_a_"+nb;
        var player2_var_b = "var_b_"+nb;

        var player1_code = "code"+id;
        var player1_var_a = "var_a_"+id;
        var player1_var_b = "var_b_"+id;

// we store some old values before to change them
        var oldname=eval("document.getElementById('"+player2_name+"').innerHTML");
        var oldcode=eval("document.getElementById('"+player2_code+"').innerHTML");
        var oldvar_a=eval("document.getElementById('"+player2_var_a+"').innerHTML");
        var oldvar_b=eval("document.getElementById('"+player2_var_b+"').innerHTML");

// we do the permutation
        eval("document.getElementById('"+player2_name+"').innerHTML=document.getElementById('"+player1_name+"').innerHTML");
        eval("document.getElementById('"+player2_code+"').innerHTML=document.getElementById('"+player1_code+"').innerHTML");
        eval("document.getElementById('"+player2_var_a+"').innerHTML=document.getElementById('"+player1_var_a+"').innerHTML");
        eval("document.getElementById('"+player2_var_b+"').innerHTML=document.getElementById('"+player1_var_b+"').innerHTML");

// we restore the old values
        eval("document.getElementById('"+player1_name+"').innerHTML=oldname");
        eval("document.getElementById('"+player1_code+"').innerHTML=oldcode");
        eval("document.getElementById('"+player1_var_a+"').innerHTML=oldvar_a");
        eval("document.getElementById('"+player1_var_b+"').innerHTML=oldvar_b");

// & we set new values for player1's & player2's name
        eval("document.getElementById('"+player1_name+"').setAttribute('value','"+oldname+"')");
        eval("document.getElementById('"+player2_name+"').setAttribute('value',document.getElementById('"+player2_name+"').innerHTML)");

// call the XMLHttpRequest method

    if (window.XMLHttpRequest)
        {
        req = new XMLHttpRequest();
        }
    else if (window.ActiveXObject)
        {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        }
    else
        {
        return false;
        }
    req.onreadystatechange = processRequest;
    req.open("POST", "savechange.php", true);
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var tosend="playernb="+nb+"&playerid="+id;
    req.send(tosend);
    }
}

function processRequest()
{
if (req.readyState == 4)
    {
    if (req.status == 200)
        {
        req.responseText;
//debug mode:
//        var testing = req.responseText;
//alert('testing is: '+testing);
        }
    }
}
function permute_name(nameid,id)
{
var name_b=prompt("Enter the name you want to permute:","");
var name_a=eval("document.getElementById('"+nameid+"').getAttribute('value')");

if (name_b)
  {
  name_a=name_a.toLowerCase();
  name_b=name_b.toLowerCase();

  var found="not";

  if (isNaN(name_b)==true)
    {
    if (name_a==name_b); // no need to permute,, same names
    else
        {
        for (i=1;i<4;i++) // looping between number 1 to 4 (need to be changed to '<12' for your final script)
            {
            var searching_val=eval("document.getElementById('name"+i+"').getAttribute('value')");
            if (name_b==searching_val.toLowerCase())
                {
// we found an existing name
                found="ok";
// & we get his number
                var nb=eval("document.getElementById('player"+i+"').innerHTML");
                break;
                }
            }

        if (found=="ok")
            {
// we call the function to do the permutation
            DoPermutation(nb,id)
            }
        else
            {
            alert('hmm,... we need a correct name');
            }
        }
    }
  else //number typed, as we asked for a string/name
    {
    alert('hmm,... we need a correct name');
    }
  }
}
</script>
</body>
</html>
[/code]
then the 'savechange.php' file could be:
[code]
<?
// CONNEXION
$db_link=mysql_connect("localhost", "root", "mypass");
mysql_select_db("testing");
$oldrow= array();
$result = mysql_query("SELECT * FROM team WHERE player_number='".$_POST["playerid"]."' ");
if(mysql_num_rows($result)>=1)
    {
    while($row = mysql_fetch_array($result))
        {
// we store some old values
        $oldrow['player_name']=$row['player_name'];
        $oldrow['player_code_a']=$row['player_code_a'];
        $oldrow['player_code_b']=$row['player_code_b'];
        $oldrow['player_code_c']=$row['player_code_c'];
        }
    }
$result = mysql_query("SELECT * FROM team WHERE player_number='".$_POST["playernb"]."' ");
if(mysql_num_rows($result)>=1)
    {
    while($row = mysql_fetch_array($result))
        {
// & we update the datas, doing the permutation
mysql_query("UPDATE team SET player_name ='".$row['player_name']."', player_code_a ='".$row['player_code_a']."', player_code_b ='".$row['player_code_b']."', player_code_c ='".$row['player_code_c']."' WHERE player_number='".$_POST["playerid"]."' ") or die(mysql_error());
mysql_query("UPDATE team SET player_name ='".$oldrow['player_name']."', player_code_a ='".$oldrow['player_code_a']."', player_code_b ='".$oldrow['player_code_b']."', player_code_c ='".$oldrow['player_code_c']."' WHERE player_number='".$_POST["playernb"]."' ") or die(mysql_error());
        }
echo "done!";
    }
else
    {
echo "hmm,.. error is there ? :s";
    }
mysql_close($db_link);
?>
[/code]
So, once changes made, it saves the changes in the db using XMLHttpRequest method,,... to try,,... :)
Hoping it helps,,

& sorry for this long long post,,,,,,,

l8tr,,
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.