使 javascript 为视图中的每一行重复

Posted

技术标签:

【中文标题】使 javascript 为视图中的每一行重复【英文标题】:make javascript repeat for each row in a view 【发布时间】:2011-12-01 09:36:20 【问题描述】:

我在 Drupal 中创建了一个视图。我正在使用 javascript 修改每一行中的 CSS。该脚本在第一行上运行,但不对视图中的其余行进行更改。

这是脚本:

<script language="javascript" type="text/javascript">

window.onload = floatbr;

function floatbr() 

var f = document.getElementById('firstright') // Get div element
var s = document.getElementById('secondright') // Get div element
var w = document.getElementById('catwrapper') // Get div element
var sh = s.offsetHeight // secondright div height
var wh = w.offsetHeight // catwrapper div height
f.style.height = wh - sh + 'px'; 

</script> 

我在这个页面上使用它:http://agsone.100webcustomers.com/floatbottom.php

将脚本放在页面中一次并不能解决问题。 将脚本放在视图页脚并重复脚本不起作用。

带有 html、CSS 和 JavaScript 的 jSfiddle 的链接如下:http://jsfiddle.net/YTN3K/。

【问题讨论】:

你的 HTML 是什么样的?最好尝试设置一个显示问题的jsfiddle.net 页面。 如果没有您尝试修改的行的标记样本,就不可能回答这个问题。当然,引用的代码不会修改超过一行,它只是将样式信息应用于单个元素(页面上具有id 值“firstright”的元素)。 @draevor:两者/和,链接到外部网站,如jsfiddle.net 或jsbin.com 而不 也引用问题中的相关标记是没有用的。 @T.J.Crowder 对不起,我不明白你的意思。参考什么标记?我在谈论缺少标记并建议她创建一个页面来重现该问题。 我在 Fiddle 中添加了一个代码链接。它也与此页面上的agsone.100webcustomers.com/demo/bottom_float.html 相同,如下所述:agsone.100webcustomers.com/floatbottom.php 【参考方案1】:

Drupal 提供并且已经使用jQuery,所以你也应该使用它。 Drupal 有它的own way to manage JavaScript 并附带了一些额外的 JavaScript API,主要用于正确处理从 PHP 到 JavaScript 的传递变量、注册脚本以在页面加载和内容添加时运行等。

jQuery 文档齐全且很受欢迎,因此查找文档、教程和操作方法很容易。它自己的documentation 页面是一个好的开始。但它需要对 XHTML 文档是什么以及它的结构有基本的了解。

【讨论】:

【参考方案2】:

很难从您的问题和您所链接的标记中看出您正在尝试做什么,所以这里有一些一般信息可以帮助您:

您当前使用的函数getElementById 返回一个单个 元素:页面上具有id 值的元素。 (id必须在页面上是唯一的。)

要处理多个元素,您有多种选择。最受欢迎的两个:

您可以从给定元素开始,然后使用其childNodesfirstChildnextSibling 和类似属性从它导航到附近的其他元素。 您可以使用getElementsByTagName(在document 或元素上)来查找该容器(包括下几层)中具有给定标签的所有元素。例如,document.getElementsByTagName("p") 为您提供页面上所有段落的NodeList

这些是“DOM”(文档对象模型)的属性和方法,它是浏览器在解析和呈现 HTML 时创建的元素树和相关信息。

参考资料:

DOM2 Core DOM2 HTML bindings DOM3 Core HTML5 Specification's DOM info

这是一个显示一些非常基本的操作的示例 (live copy):

HTML:

<div id="justOneDiv">I'm the <code>justOneDiv</code> element. I'm unique on the page. JavaScript code on the page turned me red.</div>
<div id="container">I'm a container called "container" with <span>various</span> <code>span</code> elements. <span>Code</span> on the <span>page</span> has made all of the <code>span</code> elements in this container <span>bold</span>.</div>
<div>I'm a container with <span>various</span> <code>span</code> elements. <span>Note</span> that the <code>span</code> elements are <span>not</span> bold, because I'm <span>not</span> in the container above.</div>
<div>I'm a <code>div</code> with no class.</div>
<div class="foo">I'm a <code>div</code> with class "foo". Code on the page turned me blue.</div>
<div class="bar">I'm a <code>div</code> with class "bar". Code on the page turned me green.</div>
<div>Another classless <code>div</code></div>
<div class="foo other">Another "foo", also with class "other"</div>
<div class="bar">Another "bar"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar test">Another "bar", also with class "test"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar">Another "bar"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar">Another "bar"</div>

JavaScript:

(function() 

  hookEvent(window, "load", go);

  function go() 
    var list, index, div, container;

    // Get just the one element, turn it red
    document.getElementById("justOneDiv").style.color = "red";

    // Get the spans within the specific container
    container = document.getElementById("container");
    list = container.getElementsByTagName("span");

    // Loop through making those spans bold
    for (index = 0; index < list.length; ++index) 
      list.item(index).style.fontWeight = "bold";
    

    // Get a NodeList of all divs on the page
    list = document.getElementsByTagName("div");

    // Loop it, turning "foo"s blue and "bar"s green
    for (index = 0; index < list.length; ++index) 
      div = list.item(index);
      if (/\bfoo\b/.test(div.className)) 
        div.style.color = "blue";
      
      else if (/\bbar\b/.test(div.className)) 
        div.style.color = "green";
      
    
  

  function hookEvent(element, eventName, handler) 
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") 
      element.addEventListener(eventName, handler, false);
    
    else if (typeof element.attachEvent !== "undefined") 
      element.attachEvent("on" + eventName, handler);
    
    else 
      element["on" + eventName] = handler;
    
  
)();

旁注:通过利用任何不错的 JavaScript 库(如 jQuery、Prototype、YUI、Closure 或 any of several others)提供的实用程序功能,上述操作可以大大简化。

例如,使用相同的 HTML,下面是使用 jQuery 获得相同结果的 JavaScript 代码 (live copy):

jQuery(function($) 

  // Get just the one element, turn it red
  $("#justOneDiv").css("color", "red");

  // Get the spans within the specific container
  // Loop through making those spans bold
  $("#container span").css("font-weight", "bold");

  // Turn all divs with the class "foo" blue
  $("div.foo").css("color", "blue");

  // Turn all divs with the class "bar" green
  $("div.bar").css("color", "green");
);

DOM 是官方 API;像 jQuery 这样的库提供了替代或增强的 API。它们非常有用且功能强大,但我建议您对 DOM 本身有所了解,即使您使用库并且最终很少直接向 DOM API 编写代码。

【讨论】:

以上是关于使 javascript 为视图中的每一行重复的主要内容,如果未能解决你的问题,请参考以下文章

如何使视图列不为空

为 javaFx 表视图中的每一行动态填充组合框列表

在 Node.js 中为 postgres 表中的每一行以不同的间隔为每一行运行重复任务

为 Microsoft sql server 视图中的每一行分配 ID

Javascript函数仅适用于表格的第一行[重复]

UISplitView - 为 masterView 中的每一行加载不同的 detailView