ajax 操作頁面 table（表格）、select（下拉框）、a標籤、textarea文本框

1. table

爲設置table 設置id 

 <table id="table" class="table table-bordered">

 </table>

ajax操作table

var table=document.getElementById("table");  //獲取Table
var length= table.rows.length;          //獲得Table下的行數
if(length!=0){              //如果有行，則清空
    for(var i=length-1;i>=0;i--){
       table.deleteRow(i);
    }
}


//接收ajax返回數據集
for (var i = 0; i < data.length; i++) {  //遍歷返回數據集
    var tr = table.insertRow();  //創建一行對象
    for (var j = 0; j < data[i].length+1 ; j++) {
        var  td =tr.insertCell();  //創建一列對象
        if(j==data[i].length){   //本行的最後一列，添加操作鏈接
           td.innerHTML="<button onclick='updateData(\""+data[i][0]+"\")'><font color='#4c84ff'>編輯</font></button>";
           
        }else {   //前0----倒數第二列
            td.innerHTML=data[i][j];
        }

    }
    table.appendChild(tr);   //將該行添加到表格
}
document.getElementById('table').appendChild(table);  //在表格對象中，追加該數據對象

 

2.select

設置id屬性

<select id="selectTable" class="form-control input-sm" >
</select>

ajax操作select

var selectTable = document.getElementById("selectTable");
selectTable.options.length = 0;   //刪除下拉框數據
for (var i = 0; i < data.length; i++) {
    selectTable.add(new Option(data[i], data[i]));  //添加下拉框數據 option（id，value)
}

 

 

3. a標籤

設置id屬性

[ <a id="disTableName" ></a> ].表

ajax操作a

//設置a標籤內容
document.getElementById("disTableName").innerHTML = value; 
//讀取a標籤內容
value = document.getElementById("disTableName").innerHTML; 

4.textarea 文本框，獲取鼠標選中內容

設置id屬性

<textarea id="sqlplus" class="form-control" rows="5"></textarea>

ajax 獲取 textarea 選中內容 

var sqlplus = document.getElementById("sqlplus")
var start = sqlplus.selectionStart;
var end = sqlplus.selectionEnd;
var sql = sqlplus.value.substring(start,end);
alter(sql);