js修改表格内容解决思路
日期：2014-05-16 浏览次数：20311 次
js修改表格内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>操作表格</title>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:300px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
height:30px;
}
.center{
text-align:center;
}
.centerss{
text-align:center;
background-color:red;
font-size:24px;
}
</style>
<script type="text/javascript">
function addRow(){
//var three=document.getElementById("row3")
//var ro=document.createElement("tr");
//var cl1=document.createElement("td");
//cl1.innerHTML="幸福从天而降";
//var cl2=document.createElement("td");
//cl2.innerHTML="¥18.5";
//ro.appendChild(cl1);
//ro.appendChild(cl2);
//three.parentNode.insertBefore(ro,three);
var three=document.getElementById("myTable").insertRow(3);
var t=document.getElementById("myTable");
var rowNumber=t.rows.length+1;
three.id=rowNumber
var cl1=three.insertCell(0);
cl1.innerHTML="幸福从天而降";
var cl1=three.insertCell(1);
cl1.innerHTML="30";
var cl2=three.insertCell(2);
cl2.innerHTML="¥20.3";
var cl3=three.insertCell(3);
cl3.innerHTML="<input name='bbb' type='button' value='删除' onclick=\"delRow('"+rowNumber+"')\"/> <input name='edd'
type='button' value='修改' onclick=\"editRow('"+rowNumber+"')\"/>";
cl3.align="center";
}
function updateRow(){
var upda=document.getElementById("myTable").rows[0];
upda.className="centerss";
}
function delRow(id){
//var two=document.getElementById("row2");
//two.parentNode.removeChild(two);
var da=document.getElementById(id).rowIndex;
document.getElementById("myTable").deleteRow(da);
}
//修改行
function editRow(www,ddd){
var two=document.getElementById(ddd);
var oldElement =document.getElementById("myTable").rows[ddd].cells[1];
//获得按钮对象
var button = document.getElementById(www);
if(button.value == "修改"){
//创建新元素
var newElement = document.createElement("input");
//设置属性值
newElement.setAttribute("type","text");
newElement.style['width'] = '20px';
newElement.setAttribute("value",oldElement.innerHTML);
oldElement.parentNode.replaceChild(newElement,oldElement);
button.value="确定";
}
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="row2">
<td>看得见风景的房间</td>
<td>10</td>
<td>¥19.9</td>&nb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>操作表格</title>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:300px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
height:30px;
}
.center{
text-align:center;
}
.centerss{
text-align:center;
background-color:red;
font-size:24px;
}
</style>
<script type="text/javascript">
function addRow(){
//var three=document.getElementById("row3")
//var ro=document.createElement("tr");
//var cl1=document.createElement("td");
//cl1.innerHTML="幸福从天而降";
//var cl2=document.createElement("td");
//cl2.innerHTML="¥18.5";
//ro.appendChild(cl1);
//ro.appendChild(cl2);
//three.parentNode.insertBefore(ro,three);
var three=document.getElementById("myTable").insertRow(3);
var t=document.getElementById("myTable");
var rowNumber=t.rows.length+1;
three.id=rowNumber
var cl1=three.insertCell(0);
cl1.innerHTML="幸福从天而降";
var cl1=three.insertCell(1);
cl1.innerHTML="30";
var cl2=three.insertCell(2);
cl2.innerHTML="¥20.3";
var cl3=three.insertCell(3);
cl3.innerHTML="<input name='bbb' type='button' value='删除' onclick=\"delRow('"+rowNumber+"')\"/> <input name='edd'
type='button' value='修改' onclick=\"editRow('"+rowNumber+"')\"/>";
cl3.align="center";
}
function updateRow(){
var upda=document.getElementById("myTable").rows[0];
upda.className="centerss";
}
function delRow(id){
//var two=document.getElementById("row2");
//two.parentNode.removeChild(two);
var da=document.getElementById(id).rowIndex;
document.getElementById("myTable").deleteRow(da);
}
//修改行
function editRow(www,ddd){
var two=document.getElementById(ddd);
var oldElement =document.getElementById("myTable").rows[ddd].cells[1];
//获得按钮对象
var button = document.getElementById(www);
if(button.value == "修改"){
//创建新元素
var newElement = document.createElement("input");
//设置属性值
newElement.setAttribute("type","text");
newElement.style['width'] = '20px';
newElement.setAttribute("value",oldElement.innerHTML);
oldElement.parentNode.replaceChild(newElement,oldElement);
button.value="确定";
}
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="row2">
<td>看得见风景的房间</td>
<td>10</td>
<td>¥19.9</td>&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
