javascriptの最近のブログ記事

javascript 変数をPOSTする

| コメント(0)

<script type="text/javascript">
           // 行数取得
           var row_len = table.rows.length;
           // 現在の行数表示用
           document.getElementById( "Output" ).innerHTML = row_len - 1;
           document.forms['form2'].elements['count'].value = row_len - 1;
</script>

<form id="form2" action="#" method="post">
          <input type="hidden" name="count" value="">

$i = 1;
    while($rows = mysql_fetch_array($results)) {

中略

@$tempHtmls .= "<td>";
        @$tempHtmls .= "<div id=\"divtext".$i."\">".$Memo."</div>";
        @$tempHtmls .= "<textarea name=\"memo\" id=\"areatext".$i."\" style=\"display:none;\" cols=30 rows=8>".$Memo."</textarea>";
        @$tempHtmls .= "<script type=\"text/javascript\">";
                   @$tempHtmls .= "$('#divtext".$i."').click(function() {";
                   @$tempHtmls .= "$('#divtext".$i."').css('display', 'none');";
                   @$tempHtmls .= "$('#areatext".$i."')";
                          @$tempHtmls .= ".val($('#divtext".$i."').text())";
                          @$tempHtmls .= ".css('display', '')";
                          @$tempHtmls .= ".focus();";
                   @$tempHtmls .= "});";
                   @$tempHtmls .= "$('#areatext".$i."').blur(function() {";
                   @$tempHtmls .= "$('#areatext".$i."').css('display', 'none');";
                   @$tempHtmls .= "$('#divtext".$i."')";
                   @$tempHtmls .= ".text($('#areatext".$i."').val())";
                   @$tempHtmls .= ".css('display', '');";
                   @$tempHtmls .= "});";
              @$tempHtmls .= "</script>";
        @$tempHtmls .= "<td>";

$i++;

echo "<script type=\"text/javascript\">";
echo "window.onload = function(){";
echo "Box = document.getElementById(\"javascriptBox\");";
echo "Push = document.getElementById(\"javascriptPush\");";
echo "Box.style.display = 'none';";
echo "Push.onclick = function(){";
echo "Box.style.display = Box.style.display == 'block' ? 'none' : 'block';";
echo "}";
echo "}</script>";

        $tempHtml .= "<td>";
        $tempHtml .= "<div id=\"javascriptPush\" onclick=\"return false;\">".クリック."</div>";
        $tempHtml .= "<div id=\"javascriptBox\">";
        $tempHtml .= "<p><textarea name=\"memo\" cols=10 rows=8>".$Memo."</textarea></p>";
        $tempHtml .= "</div>";
        $tempHtml .= "<td>";

<script type="text/javascript" src="/calibration/js/jquery.min.js"></script>

SQLに下記を入れておかないと何も入力されていない時入力領域が開けない

if(@$row["state"] == ''){
               @$prefstate = '空欄です';
           }else{
               @$prefstate = $row["state"];
           }

<td style="width:550px;">
               <div id="divtext"><?= @$prefstate ?></div>
               <textarea name="state" id="areatext" style="display:none;" cols=70 rows=8><?= @$prefstate ?></textarea>
               <script type="text/javascript">
                   $('#divtext').click(function() {
                   $('#divtext').css('display', 'none');
                   $('#areatext')
                          .val($('#divtext').text())
                          .css('display', '')
                          .focus();
                   });
                   $('#areatext').blur(function() {
                   $('#areatext').css('display', 'none');
                   $('#divtext')
                   .text($('#areatext').val())
                   .css('display', '');
                   });
                </script>
 </td>

シンプルなの見つけました。参考にさせていただいたサイト様ありがとうございます。

URL不明になってしまいました^^;。

実践的なコードを載せます。

 

<td>

            <?php

                 $sql = "SELECT * from lotnumber";

                 $result = executeQuery($sql);

                 while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){

                 @$Selectbox .= "<option value=\"".$row["lotnumber"]."\">"."".$row["lotnumber"]."</option>";

                 }

             ?>

            <select style="width:120px; clip:rect(0px,120px,22px,100px); position:absolute;" onchange="select(this);">

            <?= $Selectbox ?>

            </select>

            <input id="t1" name="mlot" type="text" style="width:100px;margin-right:20px;" value=<?= $prefMlot ?>>

            <script language="javascript">

               function select(obj){

               document.getElementById("t1").value=obj.options[obj.selectedIndex].text;

               }

            </script>

</td>

複数の場合は、(自分はちょっとはまりました^^;)

<td>
          <?php
                 $sql = "SELECT * from salesratio";
                 $result = executeQuery($sql);
                 while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
                 @$Selectbox .= "<option value=\"".$row["customer"]."\">"."".$row["customer"]."</option>";
                 }
           ?>
            <select style="width:120px; clip:rect(0px,120px,22px,100px); position:absolute;" onchange="select(this);">
            <?= $Selectbox ?>
            </select>
            <input id="t1" name="customer" type="text" style="width:100px;margin-right:20px;" value=''>
            <script language="javascript">
               function select(obj){
               document.getElementById("t1").value=obj.options[obj.selectedIndex].text;
               }
            </script>
     </td>
     <td>
          <?php
                 $sqla = "SELECT * from salesratio";
                 $resulta = executeQuery($sqla);
                 while ($rowa = mysql_fetch_array($resulta, MYSQL_ASSOC)){
                 @$Selectboxa .= "<option value=\"".$rowa["classification"]."\">"."".$rowa["classification"]."</option>";
                 }
           ?>
            <select style="width:120px; clip:rect(0px,120px,22px,100px); position:absolute;" onchange="selc(this);">
            <?= $Selectboxa ?>
            </select>
            <input id="t2" name="classification" type="text" style="width:100px;margin-right:20px;" value=''>
            <script language="javascript">
               function selc(obj){
               document.getElementById("t2").value=obj.options[obj.selectedIndex].text;
               }
            </script>
     </td>


<p>解説しなくても分かると思いますが、 onchangeとfunctionのところ。</p>

php 並び替え

| コメント(0)
<!---------並び替え--------
  <script type="text/javascript" src="/gateway/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/gateway/js/stupidtable.js?dev"></script>
  <script type="text/javascript">
    $(function(){
        $("table").stupidtable();
    });
  </script>
                <STYLE type="text/css">
                          body { text-align: center }
                          th[data-sort]{ cursor:pointer }
                </STYLE>
<!---------並び替え--------
 
 
    <table>
        <thead>
            <tr>
                <th data-sort="string">First Name</th>
                <th data-sort="string">Last Name</th>
                <th data-sort="string">Age</th>
                <th data-sort="string">Total</th>
                <th data-sort="string">Discount</th>
                <th data-sort="string">Difference</th>
                <th data-sort="string">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Peter</td>
                <td>Parker</td>
                <td>28</td>
                <td>$9.99</td>
                <td>20.9%</td>
                <td>+12.1</td>
                <td>Jul 6, 2006 8:14 AM</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Hood</td>
                <td>33</td>
                <td>$19.99</td>
                <td>25%</td>
                <td>+12</td>
                <td>Dec 10, 2002 5:14 AM</td>
            </tr>
            <tr>
                <td>Clark</td>
                <td>Kent</td>
                <td>18</td>
                <td>$15.89</td>
                <td>44%</td>
                <td>-26</td>
                <td>Jan 12, 2003 11:14 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>Almighty</td>
                <td>45</td>
                <td>$153.19</td>
                <td>44.7%</td>
                <td>+77</td>
                <td>Jan 18, 2001 9:12 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>Evans</td>
                <td>22</td>
                <td>$13.19</td>
                <td>11%</td>
                <td>-100.9</td>
                <td>Jan 18, 2007 9:12 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>Evans</td>
                <td>22</td>
                <td>$13.19</td>
                <td>11%</td>
                <td>0</td>
                <td>Jan 18, 2007 9:12 AM</td>
            </tr>
        </tbody>

javascript 左クリックダメ

| コメント(0)

<SCRIPT Language='JavaScript'>
document.onmousedown=action;
function action(){
if(event.button==1) {
alert('ダメ');
return false;
}
}
</SCRIPT>

注)IEだけだと思う。

<script type="text/javascript" language="JavaScript">
function noContextMenu(e){
window.opener = window;
var win = window.open(location.href,"_self");
win.close();
return false;
}
document.oncontextmenu = noContextMenu;
</script>

<script type="text/javascript" language="JavaScript">
function noContextMenu(e){
window.opener = window;
var win = window.open(http://shopspat.jp/index.html');
win.open();
return false;
}
document.oncontextmenu = noContextMenu;
</script>

注)chromeではだめかな?

webページの印刷禁止

| コメント(0)

<style type="text/css">
/* ページ全体を印刷させない場合 */
@media print {
    body { display: none !important; }
}
</style>

<style type="text/css">
/* 画像のみ印刷させない場合 */
@media print {
    img { display: none !important; }
}
</style>

自動でリンクを飛ばす スクリプト

| コメント(0)

<SCRIPT language="JavaScript">
mnt = 5; // 何秒後に移動するか?
url = "http://shopspat.jp/";
function jumpPage() {
  location.href = url;
}
setTimeout("jumpPage()",mnt*1000)
</SCRIPT>

右クリック禁止 アラート表示

| コメント(0)

<script language="JavaScript">
function notes(eve){
    if(document.all){
        if(event.button == 2){
            alert("右クリック禁止!");
            return false;
        }
    }
    if(document.layers){
        if(eve.which == 3){
            alert("右クリック禁止!");
            return false;
        }
    }
}
if(document.layers)document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=notes;
</script>

注)IEだけ?