持久性复选框，动态表格，php javascript

时间：2016-10-03 00:11:27

标签： javascript php html checkbox

我一直致力于这个不间断的工作，并没有一个在线建议有效。 我有一个动态创建的表，每5秒刷新一次。桌子上有复选框，如果你选中一个框，它会突出显示该行。当页面刷新时，所有检查状态都会丢失，我需要通过本地存储或cookie保存它们，甚至可以写入文件。 请提前帮助和谢谢。

我当前正在运行的代码未保留已检查状态：

    <HTML>
<HEAD>
<TITLE>list</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<meta http-equiv="refresh" content="5" >
    <style>
.inv {
    display: none;
}

table.sortable thead {
    background-color:#999;
    color:#222222;
    font-weight: bold;
    cursor: default;
}
table.sortable tbody {
    counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
    content: "";
    display: table-cell;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
}
    </style>
<script src="../../sorttable.js"></script>
<script>
function toggle_highlight(inputTagReference)
{
    var is_checked = inputTagReference.checked; //true or false
    if(is_checked)
    {
        inputTagReference.parentNode.parentNode.style.backgroundColor="yellow";
    }
    else
    {
        inputTagReference.parentNode.parentNode.style.backgroundColor="";
    }
}
</script>
</HEAD>
<BODY BGCOLOR="#dddddd" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<h1 align="center">List</h1>
<p align="center">&nbsp;</p>
<p align="center">
<?php
    echo '<div>';

    //Create file with headers


system("cmd /C makeit.bat");


    //Create html table
echo '<p align="center">&nbsp;</p>';
echo '<p align="center">&nbsp;</p>';
echo '<table class="sortable" align="center">';

$row = 0;
$handle = fopen("readylist.txt", "r");

while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
    if ($row == 0) {
        // this is the first line of the file
        // it contains titles of columns
        $num = count($data);
        echo "<thead>\n<tr>";
        $row++;
        for ($c=0; $c < $num; $c++) {
            echo "<th align='left' height='75' width='135'>" . $data[$c] . "</th>";
        }
        echo "<td></td>";
        echo "</tr>\n</thead>\n\n<tbody>";
    } else {
        // this handles the rest of the lines of the file
        $num = count($data);
        echo "<tr id=Row0$row>";
        $row++;
        for ($c=0; $c < $num; $c++) {
            echo "<td id=Col0$c>" . $data[$c] . "</td>";
        }
        echo "<td><input type='checkbox' name='Chk$row id=Chk$row' value='Chk$row' onclick='toggle_highlight(this)'></td>";
        echo "</tr>\n";
    }
}
fclose($handle);

echo "</tbody>\n</table>";



echo '</div>';

?>
</p>
</BODY>
</HTML>

这是非工作解决方案：

        <HTML>
    <HEAD>
    <TITLE>list</TITLE>
    <META name="description" content="">
    <META name="keywords" content="">
    <meta http-equiv="refresh" content="5" >
        <style>
#checkbox-container{
  margin: 10px 5px;
}

#checkbox-container div{
  margin-bottom: 5px;
}

#checkbox-container button{
  margin-top: 5px;
}

input[type=text] {
  padding: .5em .6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
}
    .inv {
        display: none;
    }

    table.sortable thead {
        background-color:#999;
        color:#222222;
        font-weight: bold;
        cursor: default;
    }
    table.sortable tbody {
        counter-reset: sortabletablescope;
    }
    table.sortable thead tr::before {
        content: "";
        display: table-cell;
    }
    table.sortable tbody tr::before {
        content: counter(sortabletablescope);
        counter-increment: sortabletablescope;
        display: table-cell;
    }
        </style>
    <script src="../../sorttable.js"></script>
    <script src="../../jquery.js"></script>
<script>
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
var $button = $("#checkbox-container button");

function allChecked(){
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus(){
  $button.text(allChecked()? "Uncheck all" : "Check all");
}

function handleButtonClick(){
  $checkboxes.prop("checked", allChecked()? false : true)
}

function updateStorage(){
  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });

  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
}

$button.on("click", function() {
  handleButtonClick();
  updateButtonStatus();
  updateStorage();
});

$checkboxes.on("change", function(){
  updateButtonStatus();
  updateStorage();
});

// On page load
$.each(formValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

$button.text(formValues["buttonText"]);
</script>
    <script>
    function toggle_highlight(inputTagReference)
    {
        var is_checked = inputTagReference.checked; //true or false
        if(is_checked)
        {
            inputTagReference.parentNode.parentNode.style.backgroundColor="yellow";
        }
        else
        {
            inputTagReference.parentNode.parentNode.style.backgroundColor="";
        }
    }
    </script>
    </HEAD>
    <BODY BGCOLOR="#dddddd" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
    <h1 align="center">List</h1>
    <p align="center">&nbsp;</p>
    <p align="center">
    <?php
        echo '<div id="checkbox-container">';

        //Create file with headers


    system("cmd /C makeit.bat");


        //Create html table
    echo '<p align="center">&nbsp;</p>';
    echo '<p align="center">&nbsp;</p>';
    echo '<table class="sortable" align="center">';

    $row = 0;
    $handle = fopen("readylist.txt", "r");

    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
        if ($row == 0) {
            // this is the first line of the file
            // it contains titles of columns
            $num = count($data);
            echo "<thead>\n<tr>";
            $row++;
            for ($c=0; $c < $num; $c++) {
                echo "<th align='left' height='75' width='135'>" . $data[$c] . "</th>";
            }
            echo "<td></td>";
            echo "</tr>\n</thead>\n\n<tbody>";
        } else {
            // this handles the rest of the lines of the file
            $num = count($data);
            echo "<tr id=Row0$row>";
            $row++;
            for ($c=0; $c < $num; $c++) {
                echo "<td id=Col0$c>" . $data[$c] . "</td>";
            }
            echo "<td><input type='checkbox' name='Chk$row id=Chk$row' value='Chk$row' onclick='toggle_highlight(this)'></td>";
            echo "</tr>\n";
        }
    }
    fclose($handle);

    echo "</tbody>\n</table>";



    echo '</div>';

    ?>
    </p>
    </BODY>
    </HTML>

这里是回答持久性复选框问题的页面中的代码，这个页面适合我，但是我页面上的代码没有。

<html >
  <head>
    <meta charset="UTF-8">


    <title>CodePen - A Pen by  SitePoint</title>




        <style>
      #checkbox-container{
  margin: 10px 5px;
}

#checkbox-container div{
  margin-bottom: 5px;
}

#checkbox-container button{
  margin-top: 5px;
}

input[type=text] {
  padding: .5em .6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
}
    </style>

  </head>

  <body translate="no" >

    <input type="text" placeholder="Type something here" />

<div id="checkbox-container">
  <div>
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option1">
  </div>
  <div>
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option2">
  </div>
  <div>
    <label for="option3">Option 3</label>
    <input type="checkbox" id="option3">
  </div>
  <button>Check All</button>
</div>

    <script src='../../jquery.js'></script>

        <script>
      var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $('#checkbox-container :checkbox');
var $button = $('#checkbox-container button');
function allChecked() {
    return $checkboxes.length === $checkboxes.filter(':checked').length;
}
function updateButtonStatus() {
    $button.text(allChecked() ? 'Uncheck all' : 'Check all');
}
function handleButtonClick() {
    $checkboxes.prop('checked', allChecked() ? false : true);
}
function updateStorage() {
    $checkboxes.each(function () {
        formValues[this.id] = this.checked;
    });
    formValues['buttonText'] = $button.text();
    localStorage.setItem('formValues', JSON.stringify(formValues));
}
$button.on('click', function () {
    handleButtonClick();
    updateButtonStatus();
    updateStorage();
});
$checkboxes.on('change', function () {
    updateButtonStatus();
    updateStorage();
});
$.each(formValues, function (key, value) {
    $('#' + key).prop('checked', value);
});
$button.text(formValues['buttonText']);
      //# sourceURL=pen.js
    </script>



  </body>
</html>

嗯，这是一天，我在这里什么也看不见。 我的假设是你们发现这和我一样困难。 我仍在努力，这是我的逻辑。 作为onclick事件的一部分，我必须获取行中其中一个单元格的insidehtml，然后设置一个cookie或使用session来存储基于行的变量，然后是一个读取该会话或cookie的onload事件。检查相应的框并突出显示相应的行。 如果有人有任何意见或建议，我们非常欢迎他们。 TIA

0 个答案:

没有答案
相关问题
最新问题