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" >
     <option value="" selected="selected" >显示1</option>
</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);