使用JavaScript以編程方式編寫html

-1

我知道這是一個愚蠢的問題，所以我提前道歉。使用JavaScript以編程方式編寫html

基本上，在一個超高層次，我想要做的是顯示x個選項卡。 x將是一個變量，最終將成爲從SharePoint返回的結果中返回的數字。

所以，基本上我想要的是JavaScript循環給定的HTML代碼塊（創建「標籤」）基於變量。

我想循環<li>標籤x次。

下面的代碼.....

HTML頁：

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> 
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral,  PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs"  Inherits="SPListWebPart.VisualWebPart1.VisualWebPart1UserControl" %> 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="Stylesheet" type="text/css" href="C:\Users\Administrator\Documents\Visual Studio 2010\Projects\SPListWebPart\SPListWebPart\VisualWebPart1\Stylesheet1.css" /> 
<ul id="sddm"> 


<script type ="text/javascript" src = "C:\Users\Administrator\Documents\Visual Studio 2010\Projects\SPListWebPart\SPListWebPart\VisualWebPart1\JScript1.js"></script> 
<script type ="text/C#" src="C:\Users\Administrator\Documents\Visual Studio  2010\Projects\SPListWebPart\SPListWebPart\VisualWebPart1\VisualWebPart1UserControl.ascx.cs"  ></script> 




<!--START JAVASCRIPT OR C# LOOP--> 

<li><a href="http://maindt" 
    onmouseover="mopen('m1');" 
    onmouseout="mclosetime('m1')">Variable</a> 
    <div id="m1" 
     onmouseover="mcancelclosetime()" 
     onmouseout="mclosetime()"> 
    </div> 
</li> 


<!--END JAVASCRIPT OR C# LOOP--> 


<div style="clear:both"></div> 
</head> 
<body></body> 
</html>

的JavaScript：

var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 




// open hidden layer 
function mopen(id) { 
// cancel close timer 
mcancelclosetime(); 

// close old layer 
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 

// get new layer and show it 
ddmenuitem = document.getElementById(id); 
ddmenuitem.style.visibility = 'visible'; 

} 
// close showed layer 
function mclose() { 
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 
} 

// go close timer 
function mclosetime() { 
closetimer = window.setTimeout(mclose, timeout); 
} 

// cancel close timer 
function mcancelclosetime() { 
if (closetimer) { 
    window.clearTimeout(closetimer); 
    closetimer = null; 
} 
} 

// close layer when click-out 
document.onclick = mclose;

CSS：

#sddm 
{ margin: 0; 
padding: 0; 
z-index: 30} 

#sddm li 
{ margin: 0; 
padding: 0; 
list-style: none; 
float: left; 
font: bold 11px arial} 

#sddm li a 
{ display: block; 
margin: 0 1px 0 0; 
padding: 4px 10px; 
width: auto; 
background: #5970B2; 
color: #FFF; 
text-align: center; 
text-decoration: none} 

#sddm li a:hover 
{ background: #49A3FF} 

#sddm div 
{ position: absolute; 
visibility: hidden; 
margin: 0; 
padding: 0; 
background: #EAEBD8; 
border: 1px solid #5970B2} 

#sddm div a 
{ position: relative; 
    display: block; 
    margin: 0; 
    padding: 5px 10px; 
    width: auto; 
    white-space: nowrap; 
    text-align: left; 
    text-decoration: none; 
    background: #EAEBD8; 
    color: #2875DE; 
    font: 11px arial} 

#sddm div a:hover 
{ background: #49A3FF; 
    color: #FFF}

來源

2013-07-10 mwilson

您應該看看[Handlebars]（http://handlebarsjs.com/） – Problematic

如果你有一個服務器端不管怎麼說，爲什麼不用C＃來做呢，只需添加一個Literal您UL

<ul id="sddm"> 
<!--START JAVASCRIPT OR C# LOOP--> 

<asp:Literal ID="ltrLIs" runat="server"></asp:Literal> 

<!--END JAVASCRIPT OR C# LOOP--> 

</ul>

現在，在後面循環代碼，添加並喜歡通過您的變量中：

ltr_Clear.Text += "<li><a href='http://maindt' onmouseover='mopen('m1');' onmouseout='mclosetime('m1')'>" + Variable + "</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> </div> </li>";

如果你想從你後面的代碼注入的JavaScript可以使用： Page.ClientScript.RegisterClientScriptBlock或Page.ClientScript.RegisterStartupScript 閱讀THIS瞭解區別。

希望這會幫助你。

來源

2013-07-10 01:42:43 Alaa

這樣的javascript模板庫。我可以看到您編輯了您的問題，但是，此答案仍然有效，可以從代碼後面添加。 – Alaa

是的，這有助於很多！謝謝！ – mwilson

要寫的東西在HTML中使用的Javascript文件：做

document.write("<li>" + Variable + "</li>");

或獲取元素並更改其innerHTML財產

document.getElementById("list").innerHTML = "<li>" + Variable + "</li>";

要在HTML文件上使用寫東西C＃： do

<%="<li>" + Variable + "</li>" %>

要的Javascript循環：做

for (var i = 0; i < Variable; i++)

要循環中C＃：做

<% for (int i = 0; i < Variable; i++) %>

所以基本上，這是結合的編碼：

的Javascript：

<!--END JAVASCRIPT OR C# LOOP--> 

<script type="text/javascript"> 
    for (var i = 0; i < Variable; i++) 
     document.write("<li>" + Variable + "</li>"); 
</script> 

<!--END JAVASCRIPT OR C# LOOP-->

C＃：

<!--START JAVASCRIPT OR C# LOOP--> 

<% for (int i = 0; i < Variable; i++) %> 
    <%= "<li>" + Variable + "</li>" %> 

<!--END JAVASCRIPT OR C# LOOP-->

一些鏈接，可以幫助：

document.write
innerHTML

來源

2013-07-10 01:48:02 ThatWeirdo

你的問題是不是真的那麼蠢。很多現代Web應用程序需要重新呈現頁面，並列出創建之類的東西裝入新的圖像與阿賈克斯的圖像滑塊的公共結構的方式。

我真想說，它不會傷害到學習一些jQuery的。 Jquery允許你在事件觸發時將列表項添加到給定的列表中。例如，如果你想「#btn_create」創建列表「#tabs」列表項，你想設置的「Hello World」作爲列表項的文字你有這樣的事情：

$("#btn_create").click(function(){ 
     $("#tabs").append("<li>Hello World</li>") 
    }

Jquery的可以幫助出了很多在其它方面中，以及，在設計用戶界面特別是當，處理AJAX請求/響應，修改所述文檔的各部分，和眼睛糖果。

來源

2013-07-10 02:15:05 tsturzl

使用JavaScript以編程方式編寫html

回答

相關問題