Question

我正在使用list通过以下代码使用JS添加哪些元素：

function getMovementButtons(size, articleId, articleTitle, articleType){
   var lowerArticleType = articleType.toLowerCase();
   var html = '<div>'+
                  '<span style="vertical-align: top">'+ size + 
                      '<span style="vertical-align: top">.</span> '+
                  '</span>'+
                  '<span style="vertical-align: top" class="'+lowerArticleType+'-title displaying-'+lowerArticleType+'-id' + articleId +'">' + articleTitle + '</span>' + 
                  '<input class="'+lowerArticleType+'-button-delete"  type="button" value="' + '<%= LanguageUtil.get(pageContext, "global.action.delete")%>' + '" onclick="removeArticle(this,\''+articleType+'\')"/>' +
                  '<div class="'+lowerArticleType+'-div-move"><input class="'+lowerArticleType+'-button-up" type="button" value="" onclick="moveArticleUp(this,\''+articleType+'\')"/>' + 
                      '<input class="'+lowerArticleType+'-button-down" type="button" value="" onclick="moveArticleDown(this,\''+articleType+'\')"/>' + 
                  '</div>'+
              '</div>';
    return html;

我有一个函数removeArticleLine。

function removeArticleLine(button) {
    var parentDiv = button.parentNode
    var articleListDiv = parentDiv.parentNode;
    articleListDiv.removeChild(parentDiv);
}

有一个问题，因为如果删除某个对象段落，则不要更改其编号。我会请你给我一个提示，如何用JS改变这些数字。我正在添加可以帮助我们的工作功能。它正确地移动了一切：

function moveArticleUp(button, articleType) {
    var articleDiv = button.parentNode.parentNode;

    var parentDiv = articleDiv.parentNode;
    var prevArticleDiv = articleDiv.previousElementSibling;

    if (prevArticleDiv && prevArticleDiv.tagName == 'DIV') {
        var articleIdValue = getArticleIdValue(articleType);
        var ids = articleIdValue.split(',');
        var articleId = getArticleIdFromArticleDiv(articleDiv, articleType);
        var articleIdIndex = ids.indexOf(articleId);
        swapPosition(ids, articleIdIndex, articleIdIndex - 1);
        setArticleIdValue(articleType, ids.join());

        removedArticleDiv = parentDiv.removeChild(articleDiv);
        parentDiv.insertBefore(removedArticleDiv, prevArticleDiv);
        console.log(articleIdIndex);
        prevArticleDiv.firstElementChild.innerHTML = articleIdIndex + 1 + '<span style="vertical-align: top">.</span>  ';
        articleDiv.firstElementChild.innerHTML = articleIdIndex + '<span style="vertical-align: top">.</span>  ';
    }
}


function moveArticleDown(button, articleType) {
    var articleDiv = button.parentNode.parentNode;

    var parentDiv = articleDiv.parentNode;
    var nextArticleDiv = articleDiv.nextElementSibling;

    if (nextArticleDiv) {
        var articleIdValue = getArticleIdValue(articleType);
        console.log(articleIdValue);
        var ids = articleIdValue.split(',');
        var articleId = getArticleIdFromArticleDiv(articleDiv, articleType);
        console.log(articleId);
        var articleIdIndex = ids.indexOf(articleId);
        console.log(articleIdIndex);
        swapPosition(ids, articleIdIndex, articleIdIndex + 1);
        setArticleIdValue(articleType, ids.join());
        console.log(ids.join());

        removedArticleDiv = parentDiv.removeChild(nextArticleDiv);
        parentDiv.insertBefore(removedArticleDiv, articleDiv);
        console.log(nextArticleDiv.firstElementChild.innerHTML);
        console.log(articleDiv.firstElementChild.innerHTML);
        nextArticleDiv.firstElementChild.innerHTML = articleIdIndex + 1 + '<span style="vertical-align: top">.</span>  ';
        articleDiv.firstElementChild.innerHTML = articleIdIndex + 2 + '<span style="vertical-align: top">.</span>  ';
    }
}

让我添加所显示表格的两个屏幕截图：

http://imgur.com/a/EOfkk

http://imgur.com/a/R9oru

Answer 1

删除一行后，您应该循环元素数组并为它们分配新数字。代码未经过测试，但应该可以使用

function removeArticleLine(button) {
    var parentDiv = button.parentNode;
    // getting the number of deleting div
    var divNumber = parseInt(parentDiv.firstChild.textContent); 

    var articleListDiv = parentDiv.parentNode;
    articleListDiv.removeChild(parentDiv);

    // we need to loop elements after deleted div, because elements before did not change theit number
    for (var i = 0 || divNumber; i < articleListDiv.children.length; i++) {
       //changing number
       articleListDiv.children[i].firstElementChild.innerHTML = (i + 1) + '<span style="vertical-align: top">.</span> ';
    }
}

更改HTML JAVASCRIPT的段落编号

1 个答案: