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”。

如何获取页面上每条消息的消息ID并使用它运行功能？
一旦运行该函数并获得结果，我怎样才能回写到正确的表列？

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

Answer 1

使用jquery：

如何获取页面上每条消息的消息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);
       }
});

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

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

＆＃13;

$(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");
       }
    });
});

＆＃13;

<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>

＆＃13;

Answer 2

我想你可以抓住所有的锚点或表格单元格（document.querySelectorAll('td')）并用正则表达式的innerText过滤它们。还可以使用正则表达式捕获组轻松检索id。

写入特定元素很简单：el.innerText = el.innerText + 'appended string'（其中el是dom元素）。

Answer 3

您希望在JavaScript中按标记名称查找元素，如下所示：

var table = document.getElementById("sortabletbl1"); 
var cells = table.getElementsByTagName("td");

变量cells将是数组，然后您可以访问第二个元素：

var messageCell = cells[i];

然后，您可以访问文本节点并使用Rustem Kakimov建议的REGEX。

Answer 4

在jQuery中，要访问每个行中的每个第二个单元格，您可以使用选择器#table tr td:nth-child(2)。

我在下面准备了一个片段，说明如何完成。

＆＃13;

$(function(){
  var $table = $('#sortabletbl1');
  var $secondColumnCells = $table.find('tr td:nth-child(2)');
  
  $secondColumnCells.each(function(){
    var $cell = $(this);
    
    // Parse text in our column
    var oldText = $cell.text();
    var onclick = $cell.find('a').attr('onclick');
    var messageId = /id=(\d+)/.exec(onclick)[1];
    var messageNo = /#(\d+)/.exec(oldText)[1];
    
    // Prepare and set new text
    var newText = oldText + ' | ' + getMessageStatus(messageId) + ' | Inside row ' + $cell.parent().index() + ' | For ' + messageNo;
    $cell.text(newText);
  });
});

var getMessageStatus = function(messageId) {
  return 'State for ' + messageId;
};

＆＃13;

<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=3571','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #12</a></td>
         <td><a href="#">Resend</a></td>
         <td><a href="#">Delete</a></td>
      </tr>
      <tr>
         <td>28/02/2017 13:08</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3215','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #23</a></td>
         <td><a href="#">Resend</a></td>
         <td><a href="#">Delete</a></td>
      </tr>
      <tr>
         <td>28/02/2017 09:48</td>
         <td><a href="#" onclick="window.open('messages.php?&amp;displaymessage=true&amp;id=3451','email_window','width=650,height=400,scrollbars=yes');return false">Message Subject #34</a></td>
         <td><a href="#">Resend</a></td>
         <td><a href="#">Delete</a></td>
      </tr>
      <tr>
         <td>28/02/2017 00:00</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 #45</a></td>
         <td><a href="#">Resend</a></td>
         <td><a href="#">Delete</a></td>
      </tr>
   </tbody>
</table>

＆＃13;

希望有所帮助！

Answer 5

您不必使用jQuery来完成这项简单的任务。你也不需要和正则表达式混在一起。只是简单的JavaScript就行了。无论如何，这个问题都没有被标记为jQuery。

获取消息ID，在每行的第二列中找到，然后运行一个使用该ID的javascript函数。

您的表格已有id，用它来选择它：

var table = document.getElementById('sortabletbl1');
您需要从连续第三行的每个anchor中获取td元素，但省略第一行。在querySelectorAll：
中使用CSS选择器
var emailCells = table.querySelectorAll('tr:not(:nth-child(1)) td:nth-child(3)');

其中，tr:not(:nth-child(1))将选择不是第一个孩子的所有tr。然后td:nth-child(3)将选择这些第三子行中的所有td。

您目前在第一行使用th，因此可能不需要这样做。您可以立即使用td。但是，我已经向你展示了以防万一。你可以简单地通过：

var emailCells = table.querySelectorAll('td:nth-child(3)');

对从querySelectorAll。

像这样：

for (i=0; i < emailCells.length; i++ ) {
    var anchor = emailCells[i].firstChild;
    result.push(anchor.search.split('=').pop());
}

其中，firstChild的{{1}}是td nchor元素。此锚元素通过其a公开location对象。使用href对象的search属性获取URL的查询字符串部分。

这是由location完成的。现在将其拆分为anchor.search字符并获取结果数组的最后一个元素。最后一个元素是=。这是由emailid完成的。将其推入anchor.search.split('=').pop()数组以供日后使用。

获取消息ID，在数据库中查找，然后添加文本标签在基于数据库结果的消息主题之后

拥有该数组后，在任何函数调用和处理中使用它。返回结果后，使用相同的机制替换从第二行开始的所有行的第二个result的{{1}} nchor textContent。

像这样：

演示代码段：

＆＃13;

td

＆＃13;

anchor.textContent = anchor.textContent + ': ' + result[i];

＆＃13;

var table = document.getElementById('sortabletbl1'), 
	emailCells = table.querySelectorAll('td:nth-child(3)'), 
	subjectCells = table.querySelectorAll('td:nth-child(2)'), 
	result = []
;

for (i=0; i < emailCells.length; i++ ) {
	var anchor = emailCells[i].firstChild;
	result.push(anchor.search.split('=').pop());
}
for (i=0; i < subjectCells.length; i++ ) {
	var anchor = subjectCells[i].firstChild;
	anchor.textContent = anchor.textContent + ': ' + result[i];
}

＆＃13;

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

5 个答案: