Question

我需要在提交表单后在表上创建行和列。我需要使用jquery来实现这一点，但我不确定我的代码有什么问题。

的index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
  padding: 5px 10px 10px 20px;
}

#ctrl-list {
  width: 260px;
  height: 280px;
  margin-left: 30px;
}

</style>

</head>
<body class='horizontal-gradation'>
<h1 class='page-title'>test</h1>

<table>
    <tr id='type'>
        <td class='item-title'>
            <!--<form method="post" onsubmit="return testFunction()">-->
            <form id="myForm">
 <input type="date" name="fdaytime" value="">
 <input type="time" name="tdaytime" value=""><br>
 <input type="submit" value="Submit" id="submitbutton">
 <input type="radio" name="bullet" value="hello" checked> hello<br>
 <input type="radio" name="bullet" value="hello1"> Hello2<br>
 <input type="radio" name="bullet" value="hello2"> Hello3</br>
 <input type="radio" name="bullet" value="hello3"> Hello4</br>
 </form>
        </td><td rowspan=6 class='selectable-list'><ul class='list' id='ctrl-list'>
        <table class='output'>
        <!--To output this table using jquery selector-->
<tr>
<th>id<th>
<th>datetime<th>
<th>type<th>
<tr>
<!--To output this table using jquery selector-->
</table>
        </ul>
        </td>
        </tr>   
</table>
<p id="output2">Click on me</p>

<script>
var $header = $('<tr>'+
'<th>'+id+'</th>'+
'<th>'+datetime+'</th>'+
'<th>'+type+'</th>'+
     '</tr>');
$(".output").append($header)
</script>

</body>
</html>

test.css

#output {
    /*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
    font-family: 'Myriad';
    src: url("../font/Nunito-Regular.ttf") format("truetype");
    border-collapse: collapse;
    width: 100%;
}

#output td, #output th {
   /* border: 1px solid #ddd;*/
    padding: 8px;*/
}

#output tr:nth-child(even){background-color: #f2f2f2;}

#output tr:hover {background-color: #ddd;}

#output th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
 /*   background-color: #4CAF50;*/
    color: white;
}

@font-face {
  font-family: "Nunito";
  src: url("../font/Nunito-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Myriad";
  src: url("../font/MyriadPro-Regular.otf") format("opentype");
}

/* default setting */
body {
  font-family: 'Myriad';
  margin: 0;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none; 
  -ms-user-select: none;
}

/* background gradation */
.horizontal-gradation {
  background: linear-gradient(
     bottom,
     navy 0%,
     dodgerblue 10%,
     blue 30%,
     navy 100%
    );
  background: -moz-linear-gradient(
     bottom,
     navy 0%,
     dodgerblue 10%,
     blue 30%,
     navy 100%
    );
  background: -webkit-linear-gradient(
     bottom,
     navy 0%,
     dodgerblue 10%,
     blue 30%,
     navy 100%
    );
}

/* lebel design */
.page-title {
  font-size: 32px;
  text-shadow: 1px 1px navy, 1px -1px navy, -1px 1px navy, -1px -1px navy;
  color: white;
  margin: 10px 0 10px 20px;
}
.item-title {
  font-size: 24px;
  color: white;
  margin: 5px 2px 0 2px;
}

/* list design */
.selectable-list {
  /* width: ***px; */
  font-size: 20px;
  overflow-y:scroll;
}

.list {
  /*height: ***px;*/
  list-style: none;
  padding: 0;
  overflow: auto;
  background-color: transparent;
  /*margin: 0 5px 5px 5px;*/
  /*border-radius: 5px;
  border: 1px solid white;*/
  color: white;
}

一旦我从主html中删除了行和th元素并尝试使用jquery，它就会失败。任何想法我如何使用jquery来实现这一点，因为我需要这个概念从数据库输出数据到表格式。

感谢。

Answer 1

尝试使用以下代码替换您的文件。

<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
  padding: 5px 10px 10px 20px;
}

#ctrl-list {
  width: 260px;
  height: 280px;
  margin-left: 30px;
}

</style>

</head>
<body class='horizontal-gradation'>
<h1 class='page-title'>test</h1>

<table>
    <tr id='type'>
        <td class='item-title'>
            <!--<form method="post" onsubmit="return testFunction()">-->
             <input type="date" name="fdaytime" value="" id='date'>
             <input type="time" name="tdaytime" value="" id='time'><br>
             <input type="submit" value="Submit" id="submitbutton">
             <input type="radio" name="bullet" value="hello" checked> hello<br>
             <input type="radio" name="bullet" value="hello1"> Hello1<br>
             <input type="radio" name="bullet" value="hello2"> Hello2</br>
             <input type="radio" name="bullet" value="hello3"> Hello3</br>
        </td><td rowspan=6 class='selectable-list'><ul class='list' id='ctrl-list'>
        <table class='output'>
        <!--To output this table using jquery selector-->
<tr>
<th>id<th>
<th>datetime<th>
<th>type<th>
<tr>
<!--To output this table using jquery selector-->
</table>
        </ul>
        </td>
        </tr>
</table>
<p id="output2">Click on me</p>

<script>
var id = 0;
 $('#submitbutton').click(function(){
   var date = $('#date').val();
   if(date == ""){
     alert('Please select date');
     return;
   }
   var time = $('#time').val();
   if(time == ""){
     alert('Please select time');
     return;
   }
   var type = $('input[type="radio"][name="bullet"]:checked').val();
   console.log(date);
   console.log(time);
   console.log(type);

   var $header = $('<tr>'+
   '<th>'+id+'</th>'+
   '<th>'+date + " "+time+'</th>'+
   '<th>'+type+'</th>'+
   '</tr>');
   $(".output").append($header);
   id++;
   $('#date').val('');
   $('#time').val('');
 });
</script>

</body>
</html>

使用jquery创建表元素

1 个答案: