Question

我尝试使用JavaScript来做这样的事情：

<div class="content">Fruit<br>
Apple: 100 - 250<br>
Orange: 90 - 190<br>
Pear: 140 - 230<br>
Melon: 1000 - 1280</div>

把它放到这样的表格中：

＆＃13;

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

＆＃13;

<table><tr><th>Fruit</th><th>Min</th><th>Max</th><th>Difference</th></tr><tr><td>Apple</td><td>100</td><td>250</td><td>150</td></tr><tr><td>Orange</td><td>90</td><td>190</td><td>100</td></tr><tr><td>Pear</td><td>140</td><td>230</td><td>90</td></tr><tr><td>Melon</td><td>1000</td><td>1280</td><td>280</td></tr></table>

＆＃13;

我找不到起点。

Answer 1

这是太难编码但您可以用作基础。

var myControl =  $('.content');
var inputData = myControl.text().split('\n');
 $('.content').remove();

var table = "<table><tr><th>" + inputData[0] + "</th><th>Min</th><th>Max</th><th>Difference</th></tr>";

for (var i = 1; i < inputData.length; i++) 
{ 
    var cells = inputData[i].replace(': ', ' ').replace(' - ',' ').split(' ');
    
    table += "<tr><th>"+cells[0]+"</th><th>"+cells[1]+"</th><th>"+ +cells[2] +"</th><th>"+ (parseInt(cells[2]) - parseInt(cells[1]))  +"</th></tr>"    
};

table+="</table>"

$("body").append(table);

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">Fruit<br>
Apple: 100 - 250<br>
Orange: 90 - 190<br>
Pear: 140 - 230<br>
Melon: 1000 - 1280</div>

Answer 2

当用户点击按钮时，以下代码会根据div“content”中的内容创建一个表。

(function(){
  var content = document.getElementById("content");
  var tresult = document.getElementById("tresult");
  var btnCreateTable = document.getElementById("btnCreateTable");
  
  //adds event listener to button
  btnCreateTable.addEventListener('click',function(e){
    //parse and create table
    parseContent(content);
  });

  function parseContent(oCon){
    var nodes = content.innerText;
    var sNodes = nodes.split("\n");
    var newTable = "";
    var table = document.createElement('table');
    //sColumns is used to def the columns for the table
    var sColumns = [
      "Fruit",
      "Min",
      "Max",
      "Difference"
    ];

    var table = document.createElement('table');
    var tr = document.createElement('tr');
    for(a = 0; a < sColumns.length; a++){
      var th = document.createElement('th');
      th.innerText = sColumns[a];
      tr.appendChild(th);        
    }
    table.appendChild(tr);

    var oFruit = [],
        oMin = [],
        oMax = [],
        oNumbers = [];

    for(b = 1; b < sNodes.length; b++){
      var sFruit = sNodes[b].split(":");
      for(c = 0; c < sFruit.length; c++){
        if(c % 2 === 0){
          oFruit.push(sFruit[c]);
        }else{
          oNumbers.push(sFruit[c]);
        }
      }        
    }

    for(var d = 0; d < oNumbers.length; d++){
      var spNum = oNumbers[d].split("-");
      oMin.push(spNum[0]);
      oMax.push(spNum[1]);
    }

    for(var f = 0; f < sNodes.length - 1; f++){   
      var tr2 = document.createElement('tr');     
      var td = document.createElement('td');
      td.innerText = oFruit[f];
      tr2.appendChild(td);

      td = document.createElement('td');
      td.innerText = oMin[f];
      tr2.appendChild(td);

      td = document.createElement('td');
      td.innerText = oMax[f];
      tr2.appendChild(td);

      td = document.createElement('td');
      td.innerText = oMax[f] - oMin[f];
      tr2.appendChild(td);
      table.appendChild(tr2);
    }

    tresult.appendChild(table);
  }; 
}());

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="content" class="content">Fruit<br>
      Apple: 100 - 250<br>
      Orange: 90 - 190<br>
      Pear: 140 - 230<br>
      Melon: 1000 - 1280
    </div>
    <div id="tresult"></div>
    <button id="btnCreateTable">Create table</button>
  </body>
</html>

从字符串制作表格

2 个答案: