完成品の最近のブログ記事

javascript 行の追加と削除

| コメント(0)

<script type="text/javascript">
var counter = 0;
/** 行追加 */
function insertRow(id) {
    counter++;
    // テーブル取得
    var table = document.getElementById(id);
    // 行を行末に追加
    var row = table.insertRow(-1);
    // セルの挿入
    var cell1 = row.insertCell(-1);
    var cell2 = row.insertCell(-1);
    var cell3 = row.insertCell(-1);
    // ボタン用 HTML
    var button = '<input type="button" value="削" onclick="deleteRow(this)" />';

    // 行数取得
    var row_len = table.rows.length;
    // 現在の行数表示用
    document.getElementById( "Output" ).innerHTML = row_len - 1;

    // セルの内容入力
    var HTML1 = button;
   var HTML2 = '<input type="text" name="address' + counter + '" value="" size="10" maxlength="20" />';
   var HTML3 = '<input type="text" name="tel' + counter + '" value="" size="10" maxlength="20" />';
   cell1.innerHTML = HTML1;
   cell2.innerHTML = HTML2;
   cell3.innerHTML = HTML3;
}
/** 行削除 */
function deleteRow(obj) {
    // 削除ボタンを押下された行を取得
    tr = obj.parentNode.parentNode;
    // trのインデックスを取得して行を削除する
    tr.parentNode.deleteRow(tr.sectionRowIndex);
    // 削除した後の行数取得して表示
    var len = table.rows.length;
    document.getElementById( "Output" ).innerHTML = len - 1;
}
</script>

<span id="Output" style="margin-left: 10px;">1</span>

<input type="button" value="行追加" onclick="insertRow('table')" />

<table id="table">
  <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
  </tr>

    <tr>
        <td><input type="button" value="削" onclick="deleteRow(this)" /></td>
        <td><input type="text" name="address' + 0 + '" value="" size="10" maxlength="20" /></td>
        <td><input type="text" name="tel' + 0 + '" value="" size="10" maxlength="20" /></td>
    </tr>
</table>

<?php
     include(dirname(__FILE__) . "/../../../../check_login.php");
     include(dirname(__FILE__) . "/../../../../DBconnect.php");
?>
<!doctype html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="/quotations/css/style-inner.css" media="all" />
      <script type="text/javascript" src="/quotations/js/jquery.min.js"></script>
      <title>quotation</title>

<script type="text/javascript"><!--
function ChangeTab(tabname) {
   // 全部消す
   document.getElementById('tab1').style.display = 'none';
   document.getElementById('tab2').style.display = 'none';
   document.getElementById('tab3').style.display = 'none';
   // 指定箇所のみ表示
   document.getElementById(tabname).style.display = 'block';
}
// --></script>
<style type="text/css"><!--
/* 表示領域全体 */
div.tabbox {
   margin: 0px; padding: 0px; width: 950px;
}

/* タブ部分 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
   display: block; width: 5em; float: left;
   margin: 0px 1px 0px 0px; padding: 3px;
   text-align: center;
   border-radius: 12px 12px 0px 0px; /* 角を丸くする */
}
p.tabs a.tab1 { background-color: blue; color: white; }
p.tabs a.tab2 { background-color: #aaaa00; color:white;}
p.tabs a.tab3 { background-color: red; color: white; }
p.tabs a:hover { color: yellow; }

/* タブ中身のボックス */
div.tab { height: 700px; overflow: auto; clear: left; }
div#tab1 {
   border: 2px solid blue; background-color: #ccffff;
}
div#tab2 {
   border: 2px solid #aaaa00; background-color: #ffffcc;
}
div#tab3 {
   border: 2px solid red; background-color: #ffcccc;
}
div.tab p { margin: 0.5em; }
--></style>

</head>

<body>
<div id="header">
<nav id="menubar">
    <?php require("../member_menu.php"); ?>
</nav>

<div id="menu">
<a href="#" target="_self">予備</a>
<a href="#" target="_self">予備</a>
<a href="#" target="_self">予備</a>
</div>

</div>

<div id="container">
<div id="category1">

  <div class="tabbox">
     <p class="tabs">
        <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">最近一覧</a>
        <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">新規登録</a>
        <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">見積詳細</a>
     </p>
     <div id="tab1" class="tab">
        <p>(タブ1の中身。)</p>
     </div>
     <div id="tab2" class="tab">
        <p>(タブ2の中身。)</p>
     </div>
     <div id="tab3" class="tab">
        <p>(タブ3の中身。)</p>
     </div>
  </div>

  <script type="text/javascript"><!--
    // デフォルトのタブを選択
    ChangeTab('tab1');
  // --></script>

php いちページで新規更新削除する

| コメント(0)

<!-------------------------------------------------POSTで次の動作分岐--->
<?php if(@$_POST["selectdo"]): ?>
<?php
     @$SelectDo = $_POST["selectdo"];
     @$prefId = $_POST["id"];
?>
<?php endif; ?>
<!--------------------------------------------------GETで次の動作分岐--->
<?php if(@$_GET["selectdo"]): ?>
<?php
     @$SelectDo = $_GET["selectdo"];
     @$prefId = $_GET["id"];
?>
<?php endif; ?>

<form name="form" action="#" method="post">
        <input type="hidden" name="selectdo" value="update">

<form name="form" action="#" method="post">
        <input type="hidden" name="searchdo" value="delete">

<form name="form" action="#" method="post">
        <input type="hidden" name="selectdo" value="insert">

<?php if(@$SelectDo == 'update'): ?>

echo "<div id=\"containermid\">";//カラム幅制御
echo "入力してください。";
echo "<form action=\"./#############\" method=\"post\">";
    echo "<input type=\"hidden\" name=\"selectdo\" value=\"view\">";
    echo "<input type=\"submit\" name=\"submit\" value=\"戻る\">";
echo "</form>";

<form name="formauto" action="#" method="post">
      <input type="hidden" name="selectdo" value='view'>
     <SCRIPT language="JavaScript">document.formauto.submit();</SCRIPT>
</form>

又は

echo "<form name=\"formauto\" action=\"./#############\" method=\"post\">";
              echo"<input type=\"hidden\" name=\"selectdo\" value=\'view\'>";
              echo"<SCRIPT language=\"JavaScript\">document.formauto.submit();</SCRIPT>";
echo "</form>";

<?php endif; ?>