Question

我遇到这个问题，当点击tr时，ID会被重新排序，但td样式消失了，我不知道为什么。

＆＃13;

$("tr").on("click", function() {
  var parent = $(this).parent();
  $(this).remove();
  parent.children("tr").each(function(i){
       $(this).attr('id', (i+1));
       $(this).html((i+1));
  });
});

＆＃13;

tr{
  color: #444;
  background: #ccc;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="1">
    <td>1</td>
  </tr>
  <tr id="2">
    <td>2</td>
  </tr>
  <tr id="3">
    <td>3</td>
  </tr>
  <tr id="4">
    <td>4</td>
  </tr>
</table>

＆＃13;

Answer 1

您正在通过拨打tr来取代.html的内容，消除其中的td。您可能打算替换td的内容：

$("tr").on("click", function() {
  var parent = $(this).parent();
  $(this).remove();
  parent.children("tr").each(function(i){
       $(this).attr('id', (i+1));
       $(this).find("td").html((i+1));
       //     ^^^^^^^^^^^
  });
});

更新了代码段：

$("tr").on("click", function() {
  var parent = $(this).parent();
  $(this).remove();
  parent.children("tr").each(function(i){
       $(this).attr('id', (i+1));
       $(this).find("td").html((i+1));
       //     ^^^^^^^^^^^
  });
});

tr{
  color: #444;
  background: #ccc;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="1">
    <td>1</td>
  </tr>
  <tr id="2">
    <td>2</td>
  </tr>
  <tr id="3">
    <td>3</td>
  </tr>
  <tr id="4">
    <td>4</td>
  </tr>
</table>

旁注：其他一些想法：

您可以使用parent.children()：

siblings

$(this).attr("id", i+1)是一个写this.id = i+1的很长的路。： - ）
无需重复i+1

所以：

$("tr").on("click", function() {
  var siblings = $(this).siblings();
  $(this).remove();
  siblings.each(function(i){
       ++i;
       this.id = i;
       $(this).find("td").html(i);
  });
});

$("tr").on("click", function() {
  var siblings = $(this).siblings();
  $(this).remove();
  siblings.each(function(i){
       ++i;
       this.id = i;
       $(this).find("td").html(i);
  });
});

tr{
  color: #444;
  background: #ccc;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="1">
    <td>1</td>
  </tr>
  <tr id="2">
    <td>2</td>
  </tr>
  <tr id="3">
    <td>3</td>
  </tr>
  <tr id="4">
    <td>4</td>
  </tr>
</table>

Answer 2

因为功能正在转变：

#include <windows.h>
#include <objbase.h>
#include <objidl.h>
#include <Shlobj.h>
#include <Dsclient.h>
#include <wchar.h>
// 
//  EnumCallback - Callback function for EnumWindows 
// 
static BOOL CALLBACK EnumCallback(HWND hWndChild, LPARAM lParam)
{
   char szClass[MAX_PATH];
   HTREEITEM hNode;
   if (GetClassName(hWndChild, szClass, sizeof(szClass))
   &&  strcmp(szClass,"SysTreeView32")==0) {
      hNode = TreeView_GetSelection(hWndChild);    // found the tree view window
      TreeView_EnsureVisible (hWndChild, hNode);   // ensure its selection is visible
      return(FALSE);   // done; stop enumerating
   }
   return(TRUE);       // continue enumerating
}
// 
//  BrowseCallbackProc - Callback function for SHBrowseForFolder 
// 
static INT CALLBACK BrowseCallbackProc (HWND hWnd, UINT uMsg, LPARAM lParam, LPARAM lpData) 
{
    switch (uMsg) 
    { 
        case BFFM_INITIALIZED:
            SendMessage (hWnd, BFFM_SETEXPANDED, TRUE, lpData);    // expand the tree view
            SendMessage (hWnd, BFFM_SETSELECTION, TRUE, lpData);   // select the item
            break;
        case BFFM_SELCHANGED:
            EnumChildWindows(hWnd, EnumCallback,0);
            break;
    } 
    return 0; 
} 
// 
//  SelectDirectory - User callable entry point 
// 
int SelectDirectory (HWND hWndParent, char *path, int pathSize) 
{ 
    BROWSEINFO bi = {0};
    LPITEMIDLIST pidl = NULL;
    wchar_t ws[MAX_PATH];

    CoInitialize(0);
    if (pathSize < MAX_PATH) return(FALSE);

    swprintf(ws, MAX_PATH, L"%hs", path);

    bi.hwndOwner = hWndParent; 
    bi.lpszTitle = "Select Directory"; 
    bi.ulFlags = BIF_RETURNONLYFSDIRS | BIF_NEWDIALOGSTYLE;
    bi.lpfn = BrowseCallbackProc;
    bi.lParam = (LPARAM) ws;

    pidl = SHBrowseForFolder (&bi); 
    if (pidl != NULL) 
    { 
        LPMALLOC pMalloc = NULL; 
        SHGetPathFromIDList (pidl, path);
        path[pathSize-1]= '\0';

        SHGetMalloc(&pMalloc);
        pMalloc->lpVtbl->Free(pMalloc,pidl);    // deallocate item 
        pMalloc->lpVtbl->Release(pMalloc);

        return (TRUE);
    } 
    return (FALSE);
}

分为：

<tr id="1">
  <td>1</td>
</tr>

<tr id="1"> 1 </tr>样式未应用，因为没有td。

td

应该是

$(this).html((i+1));

为什么删除后样式会消失？

2 个答案: