⑴ 怎麼用js做一個表格的增刪改查
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<tableid="tab"width="400px"border="1px">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</table>
<hr>
<formname="myform"action=""onsubmit="returnfalse">
姓名：<inputtype="text"name="user"><br>
年齡：<inputtype="number"name="age"><br>
性別：<inputtype="text"name="sex"><br>
<br>
<buttononclick="getMessage()">提交</button>
</form>
<script>
vartab=document.getElementById('tab');
varuser=document.myform.user;
varage=document.myform.age;
varsex=document.myform.sex;
functiongetMessage(){
//創建行
vartr=tab.insertRow(tab.rows.length);
tr.insertCell(0).innerHTML=user.value;
tr.insertCell(1).innerHTML=age.value;
tr.insertCell(2).innerHTML=sex.value;
tr.insertCell(3).innerHTML='<buttononclick="del(this)">刪除</button>';
}
functiondel(n){
varindex=n.parentNode.parentNode.rowIndex;
console.log(index);
tab.deleteRow(index);
}
</script>
</body>
</html>
上代碼
⑵ js 或者jquery 可以對json 進行增刪改操作嗎
給你個肯定的回答：是可以的，因為JSON可以理解為js腳本。
例子如下：回
java">varmyjson={a:"1",b:true,aarray:[1,2,3,4]};//構建一個JSON
myjson.a='修改a';/*修改屬性答*/alert(myjson);
myjson.d='新增d';/*新增屬性*/alert(myjson);
varmyjsonStr=JSON.stringify(myjson);//將myjson轉為字元串
alert(myjsonStr);
varnewjson=eval("("+myjsonStr+")");//把字元串轉換為JSON對象注意在低版本的瀏覽器上是沒有內置的JSON對象的，此時需要一個JSON2.js文件，從附件中下載即可。使用JSON2的方法如下：
//檢查JSON對象是否正確
if(typeofJSON!='object'){//瀏覽器沒有自帶JSON相關的函數
JSON=require('JSON2')//使用seajs載入JSON2.js，也可考慮其他動態方式
}
⑶ js怎麼實現增刪改查
總結下來就是dom節點的讀/寫、添加/刪除，請看下面的例子。
<!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//定義變數，保存選中的標簽
var selectLi;
//定義變數，保存修改了的標簽
var editedLi=false;
window.onload=function()
{
//新增li標簽到末尾
document.getElementById("insertEnd").onclick = insertEndclick;
//新增li標簽到指定位置
var liObj=document.getElementsByTagName("li");
for(var i=0;i<liObj.length;i++)
{
liObj[i].onclick = liChoose;
}
document.getElementById("insert").onclick = insertThere;
//刪除指定標簽
document.getElementById("delete").onclick = deleteli;
//修改指定標簽內容
document.getElementById("edit").onclick = editLi;
//將選中的該標簽變為文本框進行內容修改
document.getElementById("edit2").onclick = editLi2;
//將文本框中的內容保存
document.getElementById("save").onclick = saveLi;
}
//新增li標簽到末尾
function insertEndclick()
{
var result = prompt("需要插入的li標簽文本：", "小黑");
if (result)
{
var newli = document.createElement("li");
newli.innerHTML = result;
newli.onclick = liChoose;
document.getElementById("ulList").appendChild(newli);
}
}
//新增li標簽到指定位置
function insertThere()
{
if (selectLi)
{
var result = prompt("需要插入的li標簽文本：", "小黑");
if (result) {
var newli = document.createElement("li");
newli.innerHTML = result;
//需要給新增的li標簽設置點擊事件
newli.onclick = liChoose;
document.getElementById("ulList").insertBefore(newli, selectLi);
}
}
else
{
alert("請先選擇要插入的位置");
}
}
//高亮選中的標簽
function liChoose()
{
var ul = document.getElementsByTagName("li")
for (var i = 0; i < ul.length; i++)
{
ul[i].style.backgroundColor = "white";
}
this.style.backgroundColor = "yellow";
selectLi = this;
}
//刪除指定標簽
function deleteli()
{
if (selectLi)
{
selectLi.parentElement.removeChild(selectLi);
}
else
{
alert("請先選中要刪除的標簽");
}
}
//修改指定標簽
function editLi()
{
if(selectLi)
{
var result = prompt("輸入修改內容", "大白");
if(result)
{
selectLi.innerHTML = result;
}
}
else
{
alert("請選擇要修改的標簽");
}
}
//將選中的該標簽變為文本框進行內容修改
function editLi2()
{
if(selectLi)
{
//創建一個文本框
var newli = document.createElement("input");
newli.type = "text";
//將文本框內容設置為li標簽的文本值
newli.value = selectLi.innerHTML;
//將文本框添加到li標簽內部
selectLi.removeChild(selectLi.childNodes[0]);
selectLi.appendChild(newli);
editedLi = true;
}
}
//將文本框中的內容保存
function saveLi()
{
if (editedLi)
{
var editValue = selectLi.childNodes[0].value;
selectLi.innerHTML = editValue;
}
else
{
alert("沒有標簽在編輯狀態");
}
}
</script>
</head>
<body>
<div>
<input type="button" id="insertEnd" value="新增到末尾" />
<input type="button" id="insert" value="新增到指定位置" />
<input type="button" id="delete" value="刪除" />
<input type="button" id="edit" value="修改" />
<input type="button" id="edit2" value="將選中標簽變為文本標簽進行修改" />
<input type="button" id="save" value="保存" />
</div>
<ul id="ulList">
<li>小貓</li>
<li>小魚</li>
<li>小狗</li>
<li>大象</li>
<li>樹懶</li>
</ul>
</body>
</html>