Question

我需要使用三个文件（Javascript，HTML和CSS）编写代码。我不确定我的代码中有什么问题，请帮我找错。用户将在两个textareas中写入范围，并且当单击按钮时，将从第一个给定数字开始的所有值转换为第二个给定数字。这是我到目前为止所写的：

HTML code：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/converter.css"/>
    <title>Celsius to Fahrenheit Converter</title>
    <script language="JavaScript" src="../js/c2f.js" type="text/javascript">
    </script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>
<form action="">
    <p>
       <textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
        <textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
        <input type="button" value="Convert" name="B3" onclick="conversionTable()">
        <input type="reset" value="Clear" name="B2">
    </p>
</form>
<div id="conversion">
</div>
</body>
</html>

JavaScript代码：

function conversionTable(tagId, from, to)
{
    var first = document.getElementById("Input1");
    var second = document.getElementById("Input2");
    from =first;
    to = second;
    var conv = document.getElementById(tagId);
    var tab = document.createElement("table");
    var bod = document.createElement("tbody");
    var thed = document.createElement("thead");
    tab.appendChild(thed);
    tab.appendChild(bod);
    var tr = document.createElement("tr");
    thed.appendChild(tr);
    var th = document.createElement("th");
    tr.appendChild(th);
    th.appendChild(document.createTextNode("Miles"));
    th = document.createElement("th");
    tr.appendChild(th);
    th.appendChild(document.createTextNode("Kilometers"));
    conv.appendChild(tab);



    for(var i=from; i<=to; i++){
        tr = document.createElement("tr");
        if (i%2==0)
            tr.setAttribute("class", "even");
        else
            tr.setAttribute("class", "odd");
        bod.appendChild(tr);
        td = document.createElement("td");
        tr.appendChild(td);
        td.appendChild(document.createTextNode(i));
        td = document.createElement("td");
        tr.appendChild(td);
        td.appendChild(document.createTextNode(c2f(i)));
    }
    function c2f(c) {return Math.round((c * 1.6093)*10)/10}
}

CSS代码：

h2{text-align:center; color:blue; background: #EFEFEF}
body{margin: 4em; width: 400px}
table{margin: 2em; padding: 1em;}
th{background: #EFEFFF}
tr.even {background: #B8B8B8}
tr.odd {background: #E0FFFF}

再次，我试图将两个变量（第一个和第二个）传递给我的conversionTable（）函数。

Answer 1

DEMO HERE

html的更改：

<input type="button" value="Convert" name="B3" onclick="conversionTable('conversion')" />

对您的js进行更改：

from = parseInt(first.value);
to = parseInt(second.value);

就是这样。它应该适用于你正在寻找的东西。

Answer 2

使用普通javascript构建转换表的示例：

<form action="">
  <p>
    <textarea rows="1" name="Input1" cols="10"></textarea>
    <textarea rows="1" name="Input2" cols="10"></textarea>
    <input type="button" value="Convert" name="B3" onclick="buildConversionTable(this);">
    <input type="reset" value="Clear" name="B2">
  </p>
</form>

<div id="conversion"></div>

<script>

// Convert miles to kilometres, round to 2 places
function m2k(c) {
  return (c * 1.6093).toFixed(2);  // returns a string
}

// Return a new element with provided tag name and properties
function newElement(tagName,props) {
  var el = document.createElement(tagName);
  if (props) {
    for (var prop in props) {
      if (props.hasOwnProperty(prop)) {
        el[prop] = props[prop];
      }
    }
  }
  return el;
}

// Return a new text node with text as content
function newText(text) {
  return document.createTextNode(text);
}

// Create the conversion table
function buildConversionTable(button) {
  var form = button.form;
  var from = form.Input1.value;
  var to   = form.Input2.value;

  // Use a temporary element to build the tabel from HTML
  var d = document.createElement('div');
  d.innerHTML = '<table><thead><tr><th>Miles<th>Kilometres</thead></table>';
  var table = d.getElementsByTagName('table')[0];

  // Tables always have at least one tbody, no need for tags in the HTML
  var tbody = table.tBodies[0]

  // Use the convenience of appendChild returning the appended element
  for (var i=from, row, cell; i<=to; i++) {
    row = tbody.appendChild(newElement('tr',{className: i%2? 'odd':'even'}));
    cell = row.appendChild(newElement('td'));
    cell.appendChild(newText(i));
    cell = row.appendChild(newElement('td'));
    cell.appendChild(newText(m2k(i)));
  }

  // Add the table to the document  
  document.getElementById('conversion').appendChild(table);
}

</script>

哦，忘记了DOM表方法。添加行的for循环可以是：

  for (var i=from, row, cell; i<=to; i++) {
    row = tbody.insertRow(-1);
    row.insertCell(-1);
    row.insertCell(-1);
    row.className = i%2? 'odd':'even';
    row.cells[0].innerHTML = i;
    row.cells[1].innerHTML = m2k(i);
  }

Answer 3

我建议使用jQuery来解决这个问题。要在项目中包含jquery，请将html更改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/converter.css"/>
    <title>Celsius to Fahrenheit Converter</title>
    <script language="JavaScript" src="../js/c2f.js" type="text/javascript">
    </script>
    <!-- Here is your jquery code includer -->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>

<form action="">
    <p>
        <textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
        <textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
        <input type="button" value="Convert" id="convert" name="B3" />
        <input type="reset" value="Clear" name="B2" />
    </p>
</form>
<div id="conversion"></div>
</body>
</html>

使用jQuery，您可以将单击处理程序添加到转换按钮，然后计算from和to并调用conversionTable函数。我修改了conversionTable函数，使用jQuery以更少的代码执行您想要的操作。

$("#convert").click(function () {
    var from = parseInt($("#Input1").val());
    var to = parseInt($("#Input2").val());
    conversionTable($("#conversion"), from, to);
});

function conversionTable(tag, from, to) {
    //Generate the table with the thead of miles and kilometers
    var table = $("<table><thead>" +
        "<tr><th>Miles</th><th>Kilometers</th></tr>" +
        "</thead><tbody></tbody></table>");
    //set the tags innerHtml to the table
    tag.html(table);

    for (var i = from; i <= to; i++) {
        var miles = i;
        var kilometers = c2f(i);
        //Create a tr with the found miles and kilometers
        var tr = $("<tr><td>" + miles + "</td><td>" + kilometers + "</td></tr>");
        //Add the tr to the tables tbody
        table.find("tbody").append(tr);
    }
    //Find all of the even and odd tr's and give them the appropriate class
    table.find("tr:even").addClass("even");
    table.find("tr:odd").addClass("odd");

    function c2f(c) {
        return Math.round((c * 1.6093) * 10) / 10;
    }
}

你的css将保持与以前发布的相同。你可以在http://jsfiddle.net/FsV3j/找到一个有效的jsFiddle。

将Miles转换为用户指定范围内的公里，并将其显示在列表中

3 个答案: