Question

我正在尝试使用Javascript和jQuery创建动态表，但结果搞砸了。你能告诉我我的代码有什么问题吗？

在下面你可以找到我的代码以及JSFiddle上的一个例子。

Here是代码，因此您可以自己试用。

var students = [{
  "name": "John Doe",
  "friends": ["Tim", "Ann", "Lou", "Thomas", "Elias"]
}, {
  "name": "Harry Potter",
  "friends": ["Ron", "Hermione"]
}, {
  "name": "James May",
  "friends": ["Hammnond", "Richard"]
}];



for (var i = 0; i < students.length; i++) {
  var student = students[i];
  $('#table').append('<tr><td rowspan="' + student.friends.length + '">' + student.name + '</td>');

  for (var u = 0; u < student.friends.length; u++) {
    if (u == 0) {
      $('#table').append('<td>' + student.friends[u] + '</td></tr>');
    } else {
      $('#table').append('<tr><td>' + student.friends[u] + '</td></tr>');
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h2>
Current Result
</h2>
  <table id="table" border=1>
    <tr>
      <th>Name</th>
      <th>Friends</th>
    </tr>
  </table>

  <hr>
  <h2>
  Perfect Result
  </h2>
  <table border=1>
    <tr>
      <th>Name</th>
      <th>Friends</th>
    </tr>
    <tr>
      <td rowspan="5">John Doe</td>
      <td>Tim</td>
    </tr>
    <tr>
      <td>Ann</td>
    </tr>
    <tr>
      <td>Lou</td>
    </tr>
    <tr>
      <td>Thomas</td>
    </tr>
    <tr>
      <td>Elias</td>
    </tr>
    <tr>
      <td rowspan="2">Harry Potter</td>
      <td>Ron</td>
    </tr>
    <tr>
      <td>Hermione</td>
    </tr>
    <tr>
      <td rowspan="2">James May</td>
      <td>Hammond</td>
    </tr>
    <tr>
      <td>Richard</td>
    </tr>
  </table>
</body>

Answer 1

这可能会解决您的问题，请检查此工作小提琴 https://jsfiddle.net/scgqwLp5/

<强> JS

var students = [{
"name": "John Doe",
"friends": ["Tim", "Ann", "Lou", "Thomas", "Elias"]
}, {
"name": "Harry Potter",
"friends": ["Ron", "Hermione"]
}, {
"name": "James May",
"friends": ["Hammnond", "Richard"]
}];



for (var i = 0; i < students.length; i++) {
var student = students[i];
$('#table').append('<tr><td rowspan="' + (student.friends.length + 1) + '">' + student.name + '</td>');

for (var u = 0; u < student.friends.length; u++) {
$('#table').append('<tr><td>' + student.friends[u] + '</td></tr>');
}
}

<强> HTML

<body>
<h2>
Current Result
</h2>
<table id="table" border=1>
<tr>
  <th>Name</th>
  <th>Friends</th>
</tr>
</table>

<hr>
<h2>
Perfect Result
</h2>
<table border=1>
<tr>
  <th>Name</th>
  <th>Friends</th>
</tr>
<tr>
  <td rowspan="5">John Doe</td>
  <td>Tim</td>
</tr>
<tr>
  <td>Ann</td>
</tr>
<tr>
  <td>Lou</td>
</tr>
<tr>
  <td>Thomas</td>
</tr>
<tr>
  <td>Elias</td>
</tr>
<tr>
  <td rowspan="2">Harry Potter</td>
  <td>Ron</td>
</tr>
<tr>
  <td>Hermione</td>
</tr>
<tr>
  <td rowspan="2">James May</td>
  <td>Hammond</td>
</tr>
<tr>
  <td>Richard</td>
</tr>

Answer 2

请检查此fiddle

<body>
<h2>
Current Result
</h2>
  <table id="table" border=1>
    <tr>
      <th>Name</th>
      <th>Friends</th>
    </tr>
  </table>

  <hr>
  <h2>
  Perfect Result
  </h2>
  <table border=1>
    <tr>
      <th>Name</th>
      <th>Friends</th>
    </tr>
    <tr>
      <td rowspan="5">John Doe</td>
      <td>Tim</td>
    </tr>
    <tr>
      <td>Ann</td>
    </tr>
    <tr>
      <td>Lou</td>
    </tr>
    <tr>
      <td>Thomas</td>
    </tr>
    <tr>
      <td>Elias</td>
    </tr>
    <tr>
      <td rowspan="2">Harry Potter</td>
      <td>Ron</td>
    </tr>
    <tr>
      <td>Hermione</td>
    </tr>
    <tr>
      <td rowspan="2">James May</td>
      <td>Hammond</td>
    </tr>
    <tr>
      <td>Richard</td>
    </tr>
  </table>
</body>

var students = [{
  "name": "John Doe",
  "friends": ["Tim", "Ann", "Lou", "Thomas", "Elias"]
}, {
  "name": "Harry Potter",
  "friends": ["Ron", "Hermione"]
}, {
  "name": "James May",
  "friends": ["Hammnond", "Richard"]
}];



for (var i = 0; i < students.length; i++) {
  var student = students[i];
  var str = "";
 str +='<tr><td rowspan="' + student.friends.length + '">' +   student.name + '</td>';

  for (var u = 0; u < student.friends.length; u++) {
    if (u == 0) {
      str += '<td>' + student.friends[u] + '</td></tr>';
    } else {
      str += '<tr><td>' + student.friends[u] + '</td></tr>';
    }
  }
   $('#table').append(str);
}

它适合你。我改变了你的代码本身。我用户str反复追加。

Answer 3

＆＃13;

var students = [{
  "name": "John Doe",
  "friends": ["Tim", "Ann", "Lou", "Thomas", "Elias"]
}, {
  "name": "Harry Potter",
  "friends": ["Ron", "Hermione"]
}, {
  "name": "James May",
  "friends": ["Hammnond", "Richard"]
}];



for (var i = 0; i < students.length; i++) {
  var student = students[i];
	var str = '<tr><td rowspan="' + student.friends.length + '">' + student.name + '</td>';
  for (var u = 0; u < student.friends.length; u++) {
    if (u == 0) {
      str += '<td>' + student.friends[u] + '</td></tr>';
    } else {
      str += '<tr><td>' + student.friends[u] + '</td></tr>';
    }
	if(u == student.friends.length - 1){
		$('#table').append(str);
	}
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h2>
Current Result
</h2>
  <table id="table" border=1>
    <tr>
      <th>Name</th>
      <th>Friends</th>
    </tr>
  </table>

  <hr>
  <h2>
  Perfect Result
  </h2>
  <table border=1>
    <tr>
      <th>Name</th>
      <th>Friends</th>
    </tr>
    <tr>
      <td rowspan="5">John Doe</td>
      <td>Tim</td>
    </tr>
    <tr>
      <td>Ann</td>
    </tr>
    <tr>
      <td>Lou</td>
    </tr>
    <tr>
      <td>Thomas</td>
    </tr>
    <tr>
      <td>Elias</td>
    </tr>
    <tr>
      <td rowspan="2">Harry Potter</td>
      <td>Ron</td>
    </tr>
    <tr>
      <td>Hermione</td>
    </tr>
    <tr>
      <td rowspan="2">James May</td>
      <td>Hammond</td>
    </tr>
    <tr>
      <td>Richard</td>
    </tr>
  </table>
</body>

＆＃13;

使用Javascript和jQuery创建表

3 个答案: