javascript添加删除行中onclick='remove(" + r + ")'问题

Question

//Order的添加和删除
 var r = -1;
function addrow() {
    r++;
    //alert(m);
    var tbody = document.getElementById("tb");
    var row = tbody.insertRow();    var innerHTML1 = "<input type='text' id='ordername' size='15' value=''>";
    var innerHTML2 = "<input type='text' id='type' size='15' value=''>";
    var innerHTML3 = "<input type='text' id='quantity' size='15' value=''>";
    var innerHTML4 = "<input type='file' id='uppage' size='15' value=''>";
    var innerHTML5 = "<input type='file' id='dowmpage' size='15' value=''>";
    var innerHTML6 = "<input type='text' id='time' size='15' value=''>";
    var innerHTML7 = "<input type='button' id='delete'  value='删除' onclick='remove(" + r + ")'>";
    row.insertCell(0).innerHTML = innerHTML1;
    row.insertCell(1).innerHTML = innerHTML2;
    row.insertCell(2).innerHTML = innerHTML3;
    row.insertCell(3).innerHTML = innerHTML4;
    row.insertCell(4).innerHTML = innerHTML5;
    row.insertCell(5).innerHTML = innerHTML6;
    row.insertCell(6).innerHTML = innerHTML7;
    tbody.appendChild(row);
      
}
function remove(ind) {    alert(ind);
    var tbody = document.getElementById("tb");
    r--;
    var oTr = tbody.childNodes[ind];
    //alert(tbody.childNodes.length);
    //alert(oTr.tagName);
    //alert(oTr.innerHTML);    tbody.removeChild(oTr);
    var trRows = tbody.childNodes;
    for (var i = ind; i < trRows.length; i++) {
        var sibingTr = trRows[i];
//        alert(sibingTr.innerHTML);
        if (sibingTr == null) {
            continue;
        }
        var cells = sibingTr.childNodes;
        for (var j = 0; j < cells.length; j++) {
            var oldContent = cells[j].innerHTML;
            //alert(oldContent);
            if (j == 0) {
                var replaceRegx = "(\d+)/g";
                oldContent = oldContent.replace(replaceRegx, "" + (i + 1));
            }
            cells[j].innerHTML = ProcessStrIndex(oldContent, i);
        }
        //alert(sibingTr.innerHTML);
    }
}onclick='remove(" + r + ")'中" + r + "什么意思 咋理解？

Answer 1

var innerHTML7 = "<input type='button' id='delete' value='删除' onclick='remove(" + r + ")'>";普通的字符串拼接

Answer 2

你在这里写var innerHTML7 = "<input type='button' id='delete' value='删除' onclick='remove(" + r + ")'>";这是一个字符串，由下面的代码可以知道是为了在某一个td中插入一个input准备的。r是一个全局变量，在执行addrow函数的时候执行r++，所以你的表格最后生成是这个样子的<tr>
    <td><input type='text' id='ordername' size='15' value=''></td>
    ......
    <td><input type='button' id='delete' value='删除' onclick='remove(0)'></td>
</tr>
<tr>
    <td><input type='text' id='ordername' size='15' value=''></td>
    ......
    <td><input type='button' id='delete' value='删除' onclick='remove(1)'></td>
</tr>
....
<tr>
    <td><input type='text' id='ordername' size='15' value=''></td>
    ......
    <td><input type='button' id='delete' value='删除' onclick='remove(6)'></td>
</tr>
这样在执行remove函数的时候就可以根据不同的参数做不同的操作了
可能描述的有些问题，欢迎拍砖~~~O(∩_∩)O~

Answer 3

你在这里写var innerHTML7 = "<input type='button' id='delete' value='删除' onclick='remove(" + r + ")'>";这是一个字符串，由下面的代码可以知道是为了在某一个td中插入一个input准备的。r是一个全局变量，在执行addrow函数的时候执行r++，所以你的表格最后生成是这个样子的<tr>
    <td><input type='text' id='ordername' size='15' value=''></td>
    ......
    <td><input type='button' id='delete' value='删除' onclick='remove(0)'></td>
</tr>
<tr>
    <td><input type='text' id='ordername' size='15' value=''></td>
    ......
    <td><input type='button' id='delete' value='删除' onclick='remove(1)'></td>
</tr>
....
<tr>
    <td><input type='text' id='ordername' size='15' value=''></td>
    ......
    <td><input type='button' id='delete' value='删除' onclick='remove(6)'></td>
</tr>
这样在执行remove函数的时候就可以根据不同的参数做不同的操作了
可能描述的有些问题，欢迎拍砖~~~O(∩_∩)O~

Answer 4

r指的是 tbody下孩子节点也就是tr的索引，js里面可以通过document.getElementById("tb")childNodes[r]获取tr对象然后进行操作。
不过LZ你确定删除行的那段代码没问题？只能从最后一行进行删除吧

Answer 5

r指的是 tbody下孩子节点也就是tr的索引，js里面可以通过document.getElementById("tb")childNodes[r]获取tr对象然后进行操作。
不过LZ你确定删除行的那段代码没问题？只能从最后一行进行删除吧

Answer 6

r指的是 tbody下孩子节点也就是tr的索引，js里面可以通过document.getElementById("tb")childNodes[r]获取tr对象然后进行操作。
不过LZ你确定删除行的那段代码没问题？只能从最后一行进行删除吧

Answer 7

r取到当前行,
//Order的添加和删除
 var r = -1;
function addrow() {
  r++;
  //alert(m);
  var tbody = document.getElementById("tb");
  var row = tbody.insertRow();  var innerHTML1 = "<input type='text' id='ordername' size='15' value=''>";
  var innerHTML2 = "<input type='text' id='type' size='15' value=''>";
  var innerHTML3 = "<input type='text' id='quantity' size='15' value=''>";
  var innerHTML4 = "<input type='file' id='uppage' size='15' value=''>";
  var innerHTML5 = "<input type='file' id='dowmpage' size='15' value=''>";
  var innerHTML6 = "<input type='text' id='time' size='15' value=''>";
  var innerHTML7 = "<input type='button' id='delete' value='删除' onclick='remove(" + r + ")'>";
  row.insertCell(0).innerHTML = innerHTML1;
  row.insertCell(1).innerHTML = innerHTML2;
  row.insertCell(2).innerHTML = innerHTML3;
  row.insertCell(3).innerHTML = innerHTML4;
  row.insertCell(4).innerHTML = innerHTML5;
  row.insertCell(5).innerHTML = innerHTML6;
  row.insertCell(6).innerHTML = innerHTML7;
  tbody.appendChild(row);
    
}
function remove(ind) {  alert(ind);
  var tbody = document.getElementById("tb");
  r--;
  var oTr = tbody.childNodes[ind];
  //alert(tbody.childNodes.length);
  //alert(oTr.tagName);
  //alert(oTr.innerHTML);  tbody.removeChild(oTr);
  var trRows = tbody.childNodes;
  for (var i = ind; i < trRows.length; i++) {
  var sibingTr = trRows[i];
// alert(sibingTr.innerHTML);
  if (sibingTr == null) {
  continue;
  }
  var cells = sibingTr.childNodes;
  for (var j = 0; j < cells.length; j++) {
  var oldContent = cells[j].innerHTML;
  //alert(oldContent);
  if (j == 0) {
  var replaceRegx = "(\d+)/g";
  oldContent = oldContent.replace(replaceRegx, "" + (i + 1));
  }
  cells[j].innerHTML = ProcessStrIndex(oldContent, i);
  }
  //alert(sibingTr.innerHTML);
  }
}onclick='remove(" + r + ") 

Answer 8

这个能删除指定行，如果改成remove（r)则从最后行删除。
不过我用createElement（）通过for循环建立的结点树，//批量订单建立
function createTable(data) {
    var orderList = document.getElementById("tb");
//    var row = orderList.insertRow()
    for (var i = 0; i < data.length; i++) {
        r++;
        var o_r = new Number(r);
        var tr = document.createElement("tr");
        for (var j = 0; j < data[i].length; j++) {
            var td = document.createElement("td");
            var newInput = document.createElement("input");
            newInput.value = data[i][j];
            newInput.id = "textbox" + i + j;
//            if (j > 3&&j < 5){
//                newInput.type = "hidden";
//            }
            td.appendChild(newInput);
            tr.appendChild(td);
        }
        var td1 = document.createElement("td");
        var newInput1 = document.createElement("input");
        newInput1.type = "button"; newInput1.value = "删除"; newInput1.onclick = function() { remove(" + r + "); }
        td1.appendChild(newInput1);
        tr.appendChild(td1);
        orderList.appendChild(tr);
    }
}
中onclick 调用remove（） 函数  但不能正确的传递参数，显示传递的参数为： + r + 

Answer 9

javascript添加结点主要有两种方法 innerHTML和 createElement（） 他们有什么区别？？？相同表示为什么传递的参数却不同 ？难道是应为　一个是在ＨＴＭＬ元素中！！！！

Answer 10

innerHtml 可以通过拼接字符串的形式生成html
createElement() 创建的是html对象， newInput1.onclick = function() { remove(" + r + "); }
改成:
newInput1.onclick = function() { remove(r); }
    

Answer 11

newInput1.onclick = function() { remove(r); }
不能删除指定行，只能从最后一行删除？ 要删除指定行怎么解决

Answer 12

lz，上述通过createElement()不能正确传参的问题你将newInput1.onclick = function() { remove(r); }换成：
newInput1.onclick = del(r);
function del(r)
{
   return function(){remove(r);};
}说明:楼主你上面删除指定行的方法有点问题：比如说你删除第一行后，再删除最后一行，

Answer 13

改写下闭包函数，
function del()
{ 
  return function(){
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}
}

Answer 14

你在创建这一行的时候你要为这一行生成一个id 
var index = table.rows.length;
var newRow= table.insertRow(index);
newRow.id=index;......删除时
重新获得table传入要删除的id或this对象
通过id可以删除你要删除的行

Answer 15

谢谢啦，不过，this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);这个语句有些不懂，能解释一下吗？

Answer 16

你的删除标签的结构如下：
<table>
<tr>
  <td>
     <input type="button" value="删除"/>
  </td>
</tr>
</table>
  this.parentNode  ---得到input的上一层父节点td,然后下面依次类推，获取到table节点然后通过table删除子节点tr。
  
  

Answer 17

//推荐LZ看下js的splice()、slice()函数的用法，...要不帖子先结了吧？
var str=['a','b','c','d'];
str.splice(1,1);  
alert(str);