通过javascript从表格读取格式化的文本

时间:2018-11-21 18:39:55

标签: javascript html

class Storedata {
  constructor(name, desc, price, qty) {
    this.name = name;
    this.desc = desc;
    this.price = price;
    this.qty = qty;
  }
}

var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;

function addData() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}

function showlist() {
  var data = document.createElement('table');
  data.setAttribute("id", "data");
  data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
  for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };
  document.getElementById('listing').appendChild(data);
  document.getElementById('showbutton').removeAttribute("hidden", false);
}

function removelist() {
  var data = document.getElementById("data");
  data.parentNode.removeChild(data);
}

function addformtopage() {
  var form = document.createElement('div');
  form.setAttribute("id", "remform");
  form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" hidden=\"true\">Enter a Product Quantity</div><br><br><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
  document.getElementById('panel').appendChild(form);
  cancelform = document.getElementById('cancel');
  submit = document.getElementById('submitproduct');

}

function validateform() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  var errname = document.getElementById("chkname");
  var errdesc = document.getElementById("chkdesc");
  var errpric = document.getElementById("chkprice");
  var errqty = document.getElementById("chkqty");
  if ((proname.value) && (prodesc.value) && (propric.value) && (proqty.value)) {
    errname.setAttribute("hidden", true);
    errdesc.setAttribute("hidden", true);
    errpric.setAttribute("hidden", true);
    errqty.setAttribute("hidden", true);
    return true;
  }
  if (proname.value) {
    errname.setAttribute("hidden", true);
  }
  if (prodesc.value) {
    errdesc.setAttribute("hidden", true);
  }
  if (propric.value) {
    errpric.setAttribute("hidden", true);
  }
  if (proqty.value) {
    errqty.setAttribute("hidden", true);
  }

  if (!proname.value) {
    errname.removeAttribute("hidden", false);
  }
  if (!prodesc.value) {
    errdesc.removeAttribute("hidden", false);
  }
  if (!propric.value) {
    errpric.removeAttribute("hidden", false);
  }
  if (!proqty.value) {
    errqty.removeAttribute("hidden", false);
  }
  return false;
}

function clearform() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  proname.value = null;
  prodesc.value = null;
  propric.value = null;
  proqty.value = null;
}

function removeform() {
  var elem = document.getElementById("remform");
  elem.parentNode.removeChild(elem);
}

function removebuttons() {
  rem.setAttribute("hidden", true);
}

function showbuttons() {
  rem.removeAttribute("hidden", false);
}

btnform.addEventListener('click', function() {
  addformtopage();
  removebuttons();
  cancelform.addEventListener('click', function() {
    showbuttons();
    removeform();
  });
  submit.addEventListener('click', function() {
    if (validateform()) {
      alert("Values Added");
      addData();
      clearform();
    }
  });
});

btnlist.addEventListener('click', function() {
  showlist();
  removebuttons();
  document.getElementById('showbutton').addEventListener('click', function() {
    showbuttons();
    removelist();
    document.getElementById('showbutton').setAttribute("hidden", "true");
  });
});
#chkname,
#chkdesc,
#chkprice,
#chkqty {
  color: red;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 70%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
<!DOCTYPE HTML>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <title>
    JS Form
  </title>
</head>

<body>
  <div id="main">
    <p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
  </div>
  <div id="panel">

  </div>
  <div id="listing">

  </div>
  <button id="showbutton" hidden="true">< Back</button>
  <script src="script.js"></script>
</body>

</html>

我想以表格形式输入内容以格式文本形式描述该项目。然后以与输入相同的格式输出它,但是现在我得到的文本是用空格分隔的,其中
应该存在。请帮忙。

执行步骤 1.运行此代码段。 2.单击“添加产品”按钮。 3.填写表格(为进行测试,给出多行描述)并提交。 4.单击“取消”按钮返回。 5.单击“显示列表”按钮。 6.观察“描述”列。

This is output I am getting separated by spaces This is form input I am providing

2 个答案:

答案 0 :(得分:0)

嗯,您有两个选择。添加<pre>标记:

for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td><pre>" + arr[i].desc + "</pre></td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };

这样,它将显示新行,并使您的字符串保持干净。

或者您可以<br>替换新行:

for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc.replace(/\n/g, "<br>") + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };

请记住,默认情况下,HTML中不显示新行,如果要添加新行,请放置<br>

Test it online

希望有帮助! :)

答案 1 :(得分:0)

将此添加到您的代码中:

var text = arr[i].desc;
text = text.replace(/\n/g, '<br />');

JSfiddle

也请参见JavaScript: How to add line breaks to an HTML textarea?