在 jQuery 表绑定中获取更多数据时，如何将旧数据保留在表体中？

Question

页面操作

page_action可以在我的 Github 上找到一种工作方式→ https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/tree/page_action

背景.js

var hasExecutedOnce = false

function addUI(tabId) {

  chrome.tabs.sendMessage(tabId, {

    from: 'background',

    subject: 'isUIAdded?',

  })

}

chrome.runtime.onInstalled.addListener(function() {

  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {

    chrome.declarativeContent.onPageChanged.addRules([

      {

        conditions: [

          new chrome.declarativeContent.PageStateMatcher({

            pageUrl: { hostEquals: 'www.google.co.in' },

          }),

        ],

        actions: [new chrome.declarativeContent.ShowPageAction()],

      },

    ])

  })

})

chrome.pageAction.onClicked.addListener(function(tab) {

  if (!hasExecutedOnce) {

    chrome.tabs.executeScript(

      tab.id,

      {

        file: 'contentScript.js',

      },

      function() {

        addUI(tab.id)

      },

    )

    hasExecutedOnce = true

  }

  addUI(tab.id)

})

内容脚本.js

var body = document.getElementsByTagName('body')[0]

function insertUI() {

  var div = document.createElement('div')

  div.setAttribute('id', 'sample-extension-12345')

  div.innerHTML = `<h1>Sample Extension</h1>`

  body.appendChild(div)

}

function removeUI() {

  document.getElementById('sample-extension-12345').remove()

}

function main() {

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    if (request.subject === 'isUIAdded?') {

      const id = document.getElementById('sample-extension-12345')

      if (id === null) insertUI()

      else removeUI()

    }

  })

}

main()

浏览器操作

它还browser_action在 master 分支上有一个解决方案→ https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/

背景.js

var hasExecutedOnce = false

function addUI(tabId) {

  chrome.tabs.sendMessage(tabId, {

    from: 'background',

    subject: 'isUIAdded?',

  })

}

Answer 1

row += "<tr>";之后var row;的结果row === "undefined<tr>"。不要附加到未初始化的变量。使用row = "<tr>";的第一道防线。这也避免了在更新表后附加到相同的变量。接下来，使用$("#tblscroll tbody").append(row);代替.html。你也可以缩短函数——不需要某些变量：function OnSuccess(response) {&nbsp; //alert("Enter");&nbsp; const customer = JSON.parse(response.d),&nbsp; &nbsp; columns = [&nbsp; &nbsp; &nbsp; "actcode",&nbsp; &nbsp; &nbsp; "actdesc",&nbsp; &nbsp; &nbsp; "totamt",&nbsp; &nbsp; &nbsp; "amt01",&nbsp; &nbsp; &nbsp; "amt02",&nbsp; &nbsp; &nbsp; "amt03"&nbsp; &nbsp; ];&nbsp; $.each(customer, function(i, item) {&nbsp; &nbsp; console.log("<tr>" + $.map(columns, (prop) => "<td>" + item[prop] + "</td>").join("") + "</tr>");&nbsp; });&nbsp; $("#loader").hide();}