How would I put words from a string into a table in Javascript?_问答_开发者

How would I put words from a string into a table in Javascript?

开发者 https://www.devze.com 2023-02-28 21:42 出处：网络

I am new to programming and I have been given an assignment. the task is: \"place the words in the string \"tx_val\" in a table with a one pixel border,

相关专题：javascript

I am new to programming and I have been given an assignment. the task is:

"place the words in the string "tx_val" in a table with a one pixel border, with a gray backgound. Use only three cells per row. Empty cells should contain the word "null". "

I have been trying and trying to figure this out but the table keeps coming out wrong. Here is the code my professor gave us to work with:

<html>
<head>
<script language="javascript"> 
<!--
function fred()
{
var tx_val=document.alice.tx.value;
len_tx=tx_val.length




-->
</script>
</head>
<body>
<form name="alice">
<b>Assignment #1 Javascript</b>
<p>
The text box below is named "tx". The form is named "alice".
<p>
<input type="text" name="开发者_StackOverflow社区tx" formname="alice" size="50" value="the quick brown fox jumped over the lazy dogs back">
</form>

I'd start by creating a blank table in your HTML:

<table id="mytable"></table>

You can then add rows to this table using javascript, for example:

var tdNode = document.createElement("td");
var trNode = document.createElement("tr");
tdNode.appendChild(document.createTextNode("sometext"));
trNode.appendChild(tdNode);
document.getElementById("mytable").appendChild(trNode);

See this link for help with this.

So start by splitting your text using tx_val.split(" "), then loop through the words adding them to the table as you need.

For things like this, a lot of people like to use jQuery.

> <script language="javascript">

The language attribute has been deprecated for over a decade, type is required.

> <!--

HTML comment delimiters inside script tags haven't been necessary since about 1995 so please don't use them.

> function fred() { var

A variable declaration must have the var keyword followed by an identifier. It makes sense to keep them on the same line.

> tx_val=document.alice.tx.value;

It is not very safe stringing together long property references, if any are missing, you'll get an error. Also, it is more compatible (though not necessary in modern browsers) and much clearer to those who will maintain your code to use:

var tx_val = document.forms['alice'].elements['tx'].value;

If you are confident all the objects in the chain are there, it works but it's not very robust in a larger application.

> len_tx=tx_val.length

Remember to always declare variables, otherwise they become global at the point they are assigned a value. Also, always end statements with a semi-colon. It really matters if you are going to minify your code and is a good habit:

var len_tx = tx_value.length;

The function doesn't return anything (so is practically useless, even as an exercise) and is missing a closing }.

The function is never called. Since it is above the elements it refers to, you will have to wait to call it until after the form is added to the DOM.

Add a return statement as the list line, e.g.

return len_tx;

Add a button to the document to call the function:

<button onclick="alert(fred());">Call fred()</button>

To add text to an HTML element, give it an id, use document.getElementById to get a reference, then insert the text as its innerHTML, or create a text node and append it.