Question

我需要的帮助是关于javascript函数的13-25行和用于在每行上实现它的第126-143行。

我的问题是我正在创建一个表。在该表中，每行都可以选择，并在选择时将颜色更改为绿色。 javascript函数执行此操作。我现在正在尝试添加一个隐藏的复选框，它将与toggleColor函数执行相同的操作，但我希望能够保存此数据并将其发布，以便将其保存在数据库中。我无法弄清楚如何在Toggle Color中实现它？

使用我选择行时的当前代码，它会提醒我说没有选中复选框，但它实际上仍然会切换颜色。

我的代码：

<?php print( '<?xml version = "1.0" encoding = "utf-8"?>' ) ?> 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bot Prediction page</title>

<!-- Script for letting Game id rows be selected for Upcoming Games-->

<!-- Add checkboxes to the cell and keep it hidden (green selected then checkbox selected). After this is complete
we will want to match the id = make that equal to the gameID so that id can be temp variable to match the game
of who wins. (NAME AND VALUE) check database.php--> 
<script type="text/javascript">
     function toggleColor(myvar)
      {
          var s = myvar.style;
          s.backgroundColor= (s.backgroundColor === 'green' ? 'white' : 'green');

          if (myvar.checked) {
                alert ("The check box is checked.");
            }
            else {
                alert ("The check box is not checked.");
            }
      }

</script>

</head>

<style type="text/css">

.header {
    background-color:#A8ADAA;
    border-width: 0;
}

.correct {
    color:green;
    font-weight:900;    
}

.unPlayed {
    border:1px solid black;
}

.unPlayed td {
    border: 1px solid black;
}

.spacer {
    height: 15px;
    background-color: gray;
}

</style>
<?php
    require_once('dbBaseDao.php');
    require_once('dbGameDao.php');
    require_once('debug.php');

    //@Team: a GameDao is in the dbGameDao.php file and extends BaseDao. I have methods in there to make queries.
    //If you make any new queries, add it to the GameDao class (or *Dao class for new objects)
    $baseDao = new GameDao();
    $result = $baseDao->{'getGamesWithTeams'}(true);
    //$baseDao->display($result);

    $unplayed = Array();

    //make array of associative results
    while ($row = mysql_fetch_assoc($result)) $unplayed[] = $row;


    $keys = Array();

    //attern: $keys[pageColumnName] = dbColumnName
    $keys["Game ID"] = "gameID";
    $keys["Team 1"] = "teamName1";
    $keys["Seed 1"] = "seed1";
    $keys["Region 1"] = "region1";
    $keys["Team 2"] = "teamName2";
    $keys["Seed 2"] = "seed2";
    $keys["Region 2"] = "region2";
    //$keys["Upset Possible"] = "upsetPossible";
    $keys["Round"] = "round";

    $functions = Array();

    $function["upsetPossible"] = "upsetPossible";
    $function["region1"] = "capitilizeRegion1";
    $function["region2"] = "capitilizeRegion2";

?><!-- end PHP script --> 
<form action=""  method="POST">
<input  type=submit value="Submit Upsets">
</form>
<table class="unPlayed">
<?php

    //get smallest round. query is sorted by round, so this is always smallest
    $round = intval($unplayed[0]["round"]);

    //@nestedTable echo "<td>";
    //@nestedTable echo "<table class=\"round$round\"><td>";
    printHeaders($keys);

    //@Team: tw level loop. loop through all rows returned from database, then loop 
    //through all rows (names and values) in $keys array
    foreach ($unplayed as $row)
    {
        //@Team: ignore this for now
        if (intval($row["round"]) > $round)
        {
            $round = intval($row["round"]);

            echo "</tr></td>";
            echo "<tr><td class=\"test$round\">";

            echo "<tr class=\"spacer\"><td colspan=\"100%\"></td></tr>";
            //@nestedTable echo "</td></table>";
            //@nestedTable echo "<table class=\"round$round\">";

        }

        //@Team this print the columns and also calls the functions
        echo "<tr type=\"checkbox\" onclick=\"toggleColor(this);\" >";
        foreach (array_keys($keys) as $key)
        {
            $rowName = $keys[$key];
            //@Team this checks if the function is in the functions array, and calls it if it exists in the document
            if (array_key_exists($rowName, $function) && is_callable($function[$rowName]))
            {
                //@Team: $params is something used to send parameters to the function
                //the only param is the row from the database, but is has access to all the columns
                //and can be called by name, e.g. $row['gameId']
                $params = Array();
                $params[] = $row;
                call_user_func_array($function[$rowName], $params);
            }
            //@Team: prints just the data in the row, for the column
            else echo "<td>$row[$rowName]</td>";
        }
        echo "</tr>";
    }

    echo "</tr></td>";


    //@nestedTable echo "</td>";
    //@nestedTable echo "</td></table>";

?>
</table>
<form action="" method="POST">
<input type=submit value="Submit Upsets">
</form> 
</body>
</html>


<?php function printHeaders($keys)
{
    echo "<tr class=\"header\">";
    foreach (array_keys($keys) as $key) echo "<td>$key</td>"; 
    echo "</tr>";
}

function upsetPossible($params)
{
    echo "<td>";
    echo $params["upsetPossible"] == "1" ? "Yes" : "No";
    echo "</td>";
}

function capitilizeRegion1($params)
{
    echo "<td>";
    echo ucfirst($params["region1"]);
    echo "</td>";
}

function capitilizeRegion2($params)
{
    echo "<td>";
    echo ucfirst($params["region2"]);
    echo "</td>";
}
?>

Answer 1

您可以使用javascript document.createElement函数动态创建元素

cb = document.createElement('checkbox');
cb.style = 'display:none;';
cb.name = 'cb'+yourCbId

document.getElementById('yourTdId').appendChild(cb);

选中行时创建隐藏的复选框

1 个答案: