Use table content in hyperlink jQuery

Question

As shown in the image below, I have a table with product numbers and more. I would like the link behind the "PDF" button to automatically use the product number and .pdf at the end, so I won't have to do this manually.

Example:

<a href="https://www.example.com" +/getfile +/productnumber +.pdf">

Is there an easy way of achieving this?

My HTML

<td>56900</td>
<td>76 mm</td>
<td>800 mm</td>
<td>2,6 mm</td>
<td>Fundament Serie A 800 mm</td>
<td style="width: 16px; height: 24px;"><a class="btn-green" href="/getfile/56900.pdf">PDF</a></td>

As I have no idea on how to, I have no JS code unfortunately.

Answer 1

I do not see why you cannot just have the table generated

Here is if you handcode the table

$("table a").on("click", function(e) {
  this.href="/getfile/"+
    $(this).closest("tr").children().eq(0).text() + // first cell content
    ".pdf";
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>56900</td>
    <td>76 mm</td>
    <td>800 mm</td>
    <td>2,6 mm</td>
    <td>Fundament Serie A 800 mm</td>
    <td style="width: 16px; height: 24px;"><a class="btn-green" href="">PDF</a></td>
  </tr>
  <tr>
    <td>57000</td>
    <td>76 mm</td>
    <td>800 mm</td>
    <td>2,6 mm</td>
    <td>Fundament Serie A 800 mm</td>
    <td style="width: 16px; height: 24px;"><a class="btn-green" href="">PDF</a></td>
  </tr>
</table>

Here is a likely more useful solution for you:

var tableContent = [
  {
    id: 56900,
    dim1: 76,
    dim2: 800,
    dim3: 2.6, // note the dot
    fun: "Fundament Serie A 800 mm" // no trailing comma
  },
  {
    id: 57000,
    dim1: 80,
    dim2: 900,
    dim3: 2.9, // note the dot
    fun: "Fundament Serie B 900 mm"
  } // no trailing comma
];

var $tb = $("#tb_1"); // the tbody
$.each(tableContent,function(_,row) {
  $tb.append(
    $("<tr>"+
        "<td>"+row.id+"</td>"+
        "<td class='val'>"+row.dim1+"</td>"+
        "<td class='val'>"+row.dim2+"</td>"+
        "<td class='val'>"+String(row.dim3).replace(".",",")+"</td>"+
        "<td>"+row.fun+"</td>"+
        "<td><a class='btn-green' href='/getcontent/"+row.id+".pdf'>"+row.id+".pdf</td>"+
      "</tr>"  
    )
  );  
})

.val { text-align: right;}

td {	padding: 15px 20px; }


.btn-green {
  text-decoration:none;
	padding: 10px 15px;
	background: green;
	color: #FFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: solid 1px #20538D;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.btn-green:hover {
	background: light-green;
	border: solid 1px #2A4E77;
	text-decoration: none;
}
.btn-green:active {
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background: teal;
	border: solid 1px #203E5F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>ID</th>
    <th>dim1 mm</th>
    <th>dim2 mm</th>
    <th>dim3 mm</th>
    <th>Fundament</th>
    <th>PDF</th>
  </tr>
  <tbody id="tb_1"></tbody>
</table>