construct a nXn matrix with jquery/javascript

[codelex]

I have built an html table display like the one shown below. I would like to costruct a nXn matric table where the selected radio/value from each row is plugged into each row of the matrix. All the values below the diagonal will be the opposite of the values above on the top of the matrix. User can select 9 if he prefers the first elem1 extremely more compared with the elem2, OR 1/9 for the opposite case and 1 if they have equal relevance.

This is what my html table looks like and the matrix table i would like to derive out of it




My problem really isn't understanding how it should should work but translating into code. If there is a way to loop through the first set of block in the table i.e. 1-4 and plug each result into a matrix row. If i do the same for the rest then i can have my complete matrix table. I have tried serializeArray() on the table so far but really stuck. I need your advise please.


Here is the code I have for generating my html table:

for ($i=0; $i < (sizeOf ($myArray)); $i++){ //loop through the whole table body
$currentObs = $myArray[$i]['ObstacleDescription']; //set pointer to my current obstacle value
$x = 0;
for ($j=$i+1; $j <= (sizeOf($myArray))-1; $j++){ //loop through the inner table
$next = $myArray[$j]['ObstacleDescription'];
$or = " or ";
if (!($currentObs == $next)){
?>
<tr id="<?php echo $myArray[$i]['ComplianceID']; ?>">
<td valign='center'> <?php echo $x+1; ?> </td>
<?php $x++; ?>
<td>
<?php echo
"<input type='radio' name='op[$j]' value='0' class='myradio'>"." ".$currentObs
?>
</td>

<td><?php echo
$or." "."<input type='radio' name='op[$j]' value='1' class='myradio'>"." ".$next;
?>
</td>
<td><small>
<?php echo " 1 "."<input type='radio' name='Intense[$j]' value='1' class='myradio'>"; ?>

</small></td>
<td><small>
<?php echo
" 2 "."<input type='radio' name='Intense[$j]' value='2' class='myradio'>".
" 3 "."<input type='radio' name='Intense[$j]' value='3' class='myradio'>".
" 4 "."<input type='radio' name='Intense[$j]' value='4' class='myradio'>".
" 5 "."<input type='radio' name='Intense[$j]' value='5' class='myradio'>".
" 6 "."<input type='radio' name='Intense[$j]' value='6' class='myradio'>".
" 7 "."<input type='radio' name='Intense[$j]' value='7' class='myradio'>".
" 8 "."<input type='radio' name='Intense[$j]' value='8' class='myradio'>".
" 9 "."<input type='radio' name='Intense[$j]' value='9' class='myradio'>";
?>

</small></td>
<?php }
}
echo "<tr><td colspan='5'><hr style='border:0; height:0px' /></td></tr>";
echo "<tr><td colspan='5'><hr style='border:0; height:0px' /></td></tr>";
}
echo "</tr>";
?>

If anymore details is needed, please let me know. thanks

[something else]

<?php echo
"<input type='radio' name='op[$j]' value='0' class='myradio'>"." ".$currentObs
?>

php says no

Added after 15 minutes:

also if your making the table work of js/jquery then why not use js/jquery to build your table (less data sent to browser making it load quicker)

[codelex]

new to scripting

I would have loved to create the table using javascript/jquery but i have a very limited knowledge in these languages so thats why i used php. Also how would you correct the code?? thanks

[something else]

i should imagine the basic javascript you do know is things like:
document.write('hello');

and variables:

var someVariable = "hello";

array:

var someArray = ["hello","hi","greetings"];

(to get an arrays length use: someArray.length)

you already know php for loops which are the same as javascript



so all together you know:

<script type="text/javascript">
var cars = ["bmw","jag","ford"];
var i;
for(i=0; i<cars.length; i++)
{
    document.write('<b>Car is: ' + cars[i] + '</b>'); 
}
</script> 

The problem with your script that it had no semi-colon ; on the end of the line

[codelex]

i should imagine the basic javascript you do know is things like:
document.write('hello');

and variables:

var someVariable = "hello";

array:

var someArray = ["hello","hi","greetings"];

(to get an arrays length use: someArray.length)

you already know php for loops which are the same as javascript



so all together you know:

<script type="text/javascript">
var cars = ["bmw","jag","ford"];
var i;
for(i=0; i<cars.length; i++)
{
    document.write('<b>Car is: ' + cars[i] + '</b>'); 
}
</script> 

The problem with your script that it had no semi-colon ; on the end of the line

Thanks for the reply someone else, but NY biggest concern right now is actually constructing the matrix that resembles the one in the image I provided. Is this will be something possible with php too? Could you pls give me psudo code on how to achieve this if possible?

[something else]

start off with you need to fix your table as it looks nothing like it should be.
Once you have the table set up i can help you with the .js - you could do it with php but then you would have to click the submit button every time and wait for the server to load >.<

[codelex]

start off with you need to fix your table as it looks nothing like it should be.
Once you have the table set up i can help you with the .js - you could do it with php but then you would have to click the submit button every time and wait for the server to load >.<

I really don't know any other way to change the structure of my table. I only know php and thats what I used and also easier as I was extracting the data from the database (I.e. $myArray) is made up of results from my database table. I really need help if possible. I'm not sure how to use jquery at all

[something else]

This is the basics of it:

<html>
<head>
<script type="text/javascript">
function somethingelse(id,howmuch)
{
    var i;
    if(id=='row1')
    {
        for(i=1; i<3; i++)
       {
            document.getElementById('a'+i).innerHTML = howmuch;
       }
    }
    else if(id=='row2')
    {
        // do different rows here
    }
}
</script>
</head>
<body>

<form>
1 <input onchange="somethingelse('row1',this.value);" type='radio' name='Intense[$j]' value='1' class='myradio'>
2 <input onchange="somethingelse('row1',this.value);" type='radio' name='Intense[$j]' value='2' class='myradio'>
</form>
<table>
<tr>
<td id="a1">
note the id number above
</td>
<td id="a2">

</td>
</tr>
</table>
</body>
</html>