javascript “待办列表”的项目删除动态表格当前所在行问题,求指导

代码如下

<body>
<p>本地留言版,刷新页面即清除,无法保留</p>
<div id="input">
<input id="bar1" type="text"/>
<button id="button" onclick="input1();addtab();fnclear()">添加留言</button>
</div>
<!--<div id="bar2"></div>-->
<div id="tab"></div>

<script language="javascript">
function input1()//在框内输入内容
{
var kuang1 = document.getElementById("bar1")//现在这个KUANG1就代表的是这个文本框,
}
function fnclear()//清空输入框内容
{document.getElementById('bar1').value="";
}

function addtab() { //创建表格
var odiv = document.getElementById("tab");
var oTable = document.createElement("table");
oTable.setAttribute("border", 1, 0);
oTable.setAttribute("width", "600px");
for (i = 0; i < 1; i++) {
var tr = oTable.insertRow();
tr.innerHTML =" 事项:" + " " + document.getElementById("bar1").value + '<a href="javascript:void(0)" onclick="oTable.deleteRow()">删除</a>';//显示输入内容并添加删除按钮
}
odiv.appendChild(oTable);
}
</script>
</body>

问题:
tr.innerHTML =" 事项:" + " " + document.getElementById("bar1").value + '<a href="javascript:void(0)" onclick="oTable.deleteRow()">删除</a>';//显示输入内容并添加删除按钮
这个代码部分,删除按钮不生效,不知道如何来写,求指导

首先,是被写入的<a href="javascript:void(0)" onclick="oTable.deleteRow()">删除</a>

onclick执行的是一个独立的过程,需要独立的函数支持deleteRow()是删除行,但是不能这么调用。重新定义一个函数,

我在你写的基础上做了一下修改

function input1()//在框内输入内容

var kuang1 = document.getElementById("bar1")//现在这个KUANG1就代表的是这个文本框,
}
function fnclear()//清空输入框内容
{document.getElementById('bar1').value="";
}

function addtab() { //创建表格
var odiv = document.getElementById("tab"); 
var oTable = document.createElement("table");
/* 需要给你添加的DIV增加一个识别的ID D.n.sky */
var len = document.getElementsByTagName('table').length;
   oTable.setAttribute("border", 1, 0);  
   oTable.setAttribute("width", "600px");  
    /* 添加 */
    oTable.id = 't_' + len;
    
   for (i = 0; i < 1; i++) {           
    var tr = oTable.insertRow();
    /* 添加 D.n.sky */
      tr.innerHTML =" 事项:" + i +  " " + document.getElementById("bar1").value 
      + '<a href="javascript:void(0)" onclick="del('+len+')">删除</a>';//显示输入内容并添加删除按钮
   }
   odiv.appendChild(oTable);    
   }
/* 删除的方法 */
var del = function (i){
    var t = document.getElementById('t_'+i);
    t.parentNode.removeChild(t);
}

温馨提示:答案为网友推荐,仅供参考
第1个回答  2013-09-04
<body>
<p>本地留言版,刷新页面即清除,无法保留</p>
<div id="input">
<input id="bar1" type="text"/>
<button id="button" onclick="input1();addtab();fnclear()">添加留言</button>
</div>
<!--<div id="bar2"></div>-->
<div id="tab"></div>

<script language="javascript">
function input1()//在框内输入内容
{
var kuang1 = document.getElementById("bar1")//现在这个KUANG1就代表的是这个文本框,
}
function fnclear()//清空输入框内容
{document.getElementById('bar1').value="";
}

var odiv = document.getElementById("tab");
var oTable = document.createElement("table");
function addtab() { //创建表格

oTable.setAttribute("border", 1, 0);
oTable.setAttribute("width", "600px");
var tr;
var cell;
for (i = 0; i < 1; i++) {
tr = oTable.insertRow();
cell = tr.insertCell();
cell.innerHTML =" 事项:" + " " + document.getElementById("bar1").value + "<a href='javascript:void(0)' onclick='deleteRow()'>删除</a>";//显示输入内容并添加删除按钮
}
odiv.appendChild(oTable);
}
function deleteRow(){
oTable.deleteRow();
}
</script>
</body>