js使用each迴圈讀取val值以陣列型態儲存的方法-教學撰寫:徐嘉裕Neil hsu

在開發ajax的ui介面時需要寫一個排序功能，也就是像下面這樣可以輸入數字來排列順序的表格。

由於是全ajax的ui介面，所以取得input ->  var值得方法跟php不一樣，不能用php的邏輯來思考，希望當夠按下變更排序按鈕時，吧所有的input -> var及input -> name值全部以陣列方式打包再透過ajax.php來儲存，方法如下。

//html結構

<input type='text' class='sorteach form-control' name='1' value='' placeholder=''>

<input type='text' class='sorteach form-control' name='2' value='' placeholder=''>

<input type='text' class='sorteach form-control' name='3' value='' placeholder=''>

<input type='text' class='sorteach form-control' name='4' value='' placeholder=''>

<button type='submit' id='sortbtn' class='btn btn-primary btn-lg btn-block button'>變更排序</button>

紅字的name值為需要儲存的資料表的欄位id值，藍字為each所需要的class值

所以按下變更排序至少需要取得兩個陣列，一個是name值陣列一個是value值陣列。

//JS結構


$("#sortbtn").click(function(){

//建構陣列

var $sortidsortArr= new Array();
var $sortidtArr= new Array();

$(".sorteach").each(function(index) { 

$sortidsortArr[index]=$(this).val(); //取得value值
$sortidtArr[index]=$(this).attr("name");   取得name值

});
});

這樣$sortidsortArr變數跟$sortidtArr變數就會是陣列型態，然後使用$.ajax吧這兩個變數post到ajax.php中，再用foreach迴圈解出來存入資料表即可!

//AJAX.PHP

需先引入neillibrary的function.php

foreach($sortidtArr as $key=> $val){ 

$setvar="set sortidsort='{$sortidsortArr[$key]}' where sortid='".$val."'";

update($dbname="資料表名稱",$set=$setvar); 

}

大致上是這樣，AJAX流程細節就不再詳述，重點是each迴圈取值轉陣列的方法!!有需要的朋友可以參考看看!!


教學撰寫：徐嘉裕  Neil hsu