2012-07-20 76 views
0

我想要做的是使用PHP從數據庫中提取可變數量的記錄。我想讓用戶能夠點擊文本,並將文本切換爲輸入框,並在提交時更新數據庫。JS/jQuery中可變字段的可變數量

我知道如何使用onclick屬性來完成此操作,並將javascript函數傳遞給mySQL數據庫中對應的行號。我試圖確定如何使用Unobstrusive Javascript技術來做到這一點。

以下是創建div的代碼部分,當用戶單擊區域,account_number,dv或地址字段時,它將切換輸入框的文本,如上所述。

while($row = mysql_fetch_array($query)) { 
    $business_name = $row['business_name']; 
    $resource_id = $row['resource_id']; 
    $totaldv += $row['dv']; 
    if(!in_array($row['zone'], $zoneArray)) { 
     $zones .= $row['zone'] . " "; 
     array_push($zoneArray, $row['zone']); 
    } 
    $account_numbers .= " 
    <div>". $row['zone'] . "</div> 
    <div>" . $row['account_number'] . "</div> 
    <div>" . number_format($row['dv']) . " kW</div> 
    <div>" . $row['street_address'] . " " . $row['city'] . ", " . $row['state'] . "</div> 
    "; 
} 

我在遇到問題就在客戶可能有1個帳戶,或83個賬戶,我需要能夠從轉出正確的文本輸入框,並通過該行的id數據庫到表單。我在想也許是在某些領域使用類應用?

我之前做過類似的事情,但它總是靜態的輸入數量,所以我可以隱藏文本並顯示加載頁面時生成的輸入框。沿此線的東西(當然這不是不顯眼)

$content .= " 
      <tr> 
       <td width=35><IMG SRC=images/$i.png height=20></td> 
       <td width=35 id=rank".$i.">$rankImages</td> 
       <td width=380> 
        <span id=text".$i." style=\"cursor:pointer;\" onclick=\"editItem($i);\">".$itemArray[$i]."</span> 
        <span id=$i"."input> 
        <input id=$i type=text value=".$itemArray[$i]."> 
        <IMG SRC=images/save.png style=\"cursor:pointer;\" onclick=\"saveItem($i);\"> 
        <IMG SRC=images/cancel.png style=\"cursor:pointer;\" onclick=\"cancelEdit($i);\"> 
        </span> 
       </td> 
      </tr>"; 

function editItem(line_num) { 
     $("#text" + line_num).hide(); 
     $("#" + line_num + "input").show();   
    } 

回答

0

的方式,我會去了解它是使用data-*屬性,然後訪問使用jQuery的.data()功能的數據。你的HTML會是什麼樣較短,但長得十分相似的,例如:

<div class="editable-row" data-row-id="1"> 
    <span class="uneditable">row one</span> 
    <input type="text" value="row one" /> 
</div> 
<div class="editable-row" data-row-id="2"> 
    <span class="uneditable">row two</span> 
    <input type="text" value="row two" /> 
</div> 
<div class="editable-row" data-row-id="3"> 
    <span class="uneditable">row three</span> 
    <input type="text" value="row three" /> 
</div> 
<div class="editable-row" data-row-id="4"> 
    <span class="uneditable">row four</span> 
    <input type="text" value="row four" /> 
</div> 

而JavaScript是這樣的:

$(document).ready(function() { 
    $(".editable-row").on("click", function() { 
     var $this = $(this), 
      rowId = parseInt($this.data("rowId"), 10); 

     $this.find("input").show(); 
     $this.find(".uneditable").hide(); 

     // do something with rowId 
    }); 
}); 
+0

謝謝,我最終實現與此類似 - 它似乎工作很好 – Drazion 2012-07-21 15:41:37