Jump to content

desperate for help switching td's

neller

By neller
in Javascript Help

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
https://forums.phpfreaks.com/topic/6973-desperate-for-help-switching-tds/
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,,
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.
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,,

Archived

This topic is now archived and is closed to further replies.

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.