Question

我想从“项目描述”下的输入中对值进行排序（按字母顺序和反向），并且在单击“标记为购买”（在“操作”下需要使用的按钮）时也删除线

var sortingDirection;
var lista = [];

function addProduct() {
  document.getElementById('itemsActions').style.display = "block";
  var product = document.querySelector('.product').value;
  var btn1 = document.createElement('Button');
  document.body.appendChild(btn1);
  var x = document.createTextNode("Mark as buy");
  btn1.appendChild(x);
  var table = document.getElementById('myTable');
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  document.getElementById('input').value = "";
  cell1.innerHTML = product;
  cell2.appendChild(btn1);
  lista.push({
    product, btn1
  });
  btn1.addEventListener("click", function markAsBuy(line) {
    var line = document.getElementsByClassName('td1')
    for (var i = 0; i < line.length; i++) {
      line[i].style.setProperty("text-decoration", "line-thgrough");
    }
  })
}

function sortAsc() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName
  }
}

function sortDesc() {
  lista.sort();
  lista.reverse();
  document.getElementsByTagName("th").innerHTML = th1;
}
var input = document.getElementById("input");
input.addEventListener("keyup", function (addProduct) {
  addProduct.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("Button").click();
  }
});

Answer 1

我已附加了Codepen链接！点击here

这是示例函数

        function addProduct() {
            count++;
            document.getElementById('itemsActions').style.display = "block";
            var product = document.querySelector('.product').value;
             var btn1 = document.createElement('Button');
             btn1.id="btn"+count;
             var x = document.createTextNode("Mark as buy");
             btn1.appendChild(x);
             var table = document.getElementById('body');
             var row = table.insertRow(0);
             var cell1 = row.insertCell(0);
             var cell2 = row.insertCell(1);
             document.getElementById('input').value = "";
            cell1.innerHTML = product;
            cell1.id="product"+count;
            cell2.appendChild(btn1);

            lista.push(product);
            btn1.addEventListener("click", function() {
                 var id = this.id;
                 var idNum = id.slice(-1)
                 var data = document.getElementById('product'+idNum)
                data.style.setProperty("text-decoration", "line-through");

           })
}

function sortAsc() {
    lista.sort();
    var tr = document.getElementsByTagName('tr');

    for(i=0;i<lista.length;i++){
 //to skip the first row do i+1
   tr[i+1].getElementsByTagName('td')[0].innerHTML=lista[i]
    }

}

function sortDesc() {
    lista.sort();
    lista.reverse();
    var tr = document.getElementsByTagName('tr');
    for(i=0;i<lista.length;i++){
        //to skip the first row do i+1
      tr[i+1].getElementsByTagName('td')[0].innerHTML=lista[i]
    }

}

DOM排序列//单击删除线

1 个答案: