javascript - 使用没有类或 ID 的 HTML 页面元素

Question

我需要对某些页面元素执行两件不同的事情，不幸的是，这有点超出了我的经验水平。我希望这里的一些优秀人士能够像过去一样帮助我。

作为我正在做的事情的快速解释:我使用的系统不允许我们直接修改许多文件，尽管它们确实允许更改一些内容，包括向页面添加自定义 JS .

以下是该页面的 HTML 代码示例:

<table id="sortabletbl1" class="datatable" cellspacing="1" cellpadding="3" border="0" width="100%">
   <tbody>
      <tr>
         <th>Date</th>
         <th>Subject</th>
         <th width="20"></th>
         <th width="20"></th>
      </tr>
      <tr>
         <td>07/03/2017 00:00</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3606','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #1</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3606"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3606')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
      <tr>
         <td>28/02/2017 13:08</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3571','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #2</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3571"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3571')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
      <tr>
         <td>28/02/2017 09:48</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3555','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #3</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3555"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3555')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
      <tr>
         <td>28/02/2017 00:00</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3518','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #4</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3518"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3518')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
   </tbody>
</table>

我需要做的是获取每行第二列中的消息 ID，并使用该 ID 运行 JavaScript 函数。然后，根据该函数的结果，我需要将一些文本写回页面，并将其添加到第二列的末尾。如果表格单元格有 ID，我会知道如何执行此操作，但它们没有，而且无法添加它们。

我将获取消息 ID，在数据库中查找，然后根据数据库结果在消息主题后面添加文本标签。

所以，例子可能是这样的:

  <tr>
     <td>07/03/2017 00:00</td>
     <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3606','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #1 - CATEGORY2</a></td>
     <td><a href="resendmessage.php?resend=true&amp;emailid=3606"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
     <td><a href="#" onclick="doDelete('3606')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
  </tr>

请注意主题末尾添加了“-CATEGORY2”。

1. 如何获取页面上每条消息的消息 ID 并使用它运行函数？
2. 运行该函数并获得结果后，如何写回到正确的表列？

非常感谢您提供的任何帮助。

Answer 1

使用jquery:

1. 如何获取页面上每条消息的消息 ID 并使用它运行函数？

   $('tr :nth-child(2)').each(function(i, td) {
          var $td = $(td);
          var match = /.*id=([0-9]+).*/g.exec($('a', $td).attr('onclick'));
          if (match) {
            var id = match[1];
            console.log("id is " + id);
          }
   });
   

2. 运行函数并获得结果后，如何写回到正确的表列？

   $td.text($td.text() + "- "+ myResult);

$(document).ready(function(){
    $('tr :nth-child(2)').each(function(i, td) {
       var $td = $(td);
       var match = /.*id=([0-9]+).*/g.exec($('a', $td).attr('onclick'));
       if (match) {
         var id = match[1];
         console.log("id is " + id);
         // do my custom stuff
         var myResult = "CATEGORY " + new Date().getTime();
         $td.text($td.text() + " - " + myResult);
       } else {
         console.log("No Id found");
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sortabletbl1" class="datatable" cellspacing="1" cellpadding="3" border="0" width="100%">
   <tbody>
      <tr>
         <th>Date</th>
         <th>Subject</th>
         <th width="20"></th>
         <th width="20"></th>
      </tr>
      <tr>
         <td>07/03/2017 00:00</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3606','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #1</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3606"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3606')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
      <tr>
         <td>28/02/2017 13:08</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3571','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #2</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3571"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3571')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
      <tr>
         <td>28/02/2017 09:48</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3555','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #3</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3555"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3555')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
      <tr>
         <td>28/02/2017 00:00</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3518','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #4</a></td>
         <td><a href="resendmessage.php?resend=true&amp;emailid=3518"><img src="images/icons/resendemail.png" alt="Resend Email" border="0"></a></td>
         <td><a href="#" onclick="doDelete('3518')"><img src="images/delete.gif" alt="Delete" height="16" border="0" width="16"></a></td>
      </tr>
   </tbody>
</table>